AngularJS ng-repeat rows/ul
Posted
技术标签:
【中文标题】AngularJS ng-repeat rows/ul【英文标题】： 【发布时间】：2015-07-04 13:25:30 【问题描述】：我有一个包含各种对象的 JSON 数组，我想使用 ng-repeat 在 html 中显示这些对象，但如下所示：
<ul>
<li>object 1</li>
<li>object 2</li>
<li>object 3</li>
<li>object 4</li>
</ul>
<ul>
<li>object 5</li>
<li>object 6</li>
<li>object 7</li>
<li>object 8</li>
</ul>
基本上我只想每行显示 4 个项目 (ul) 我该怎么做？
谢谢！
【问题讨论】：
您可以使用 lodash 库将您的主 json 数组分块为 4 组。然后您有两个 ng-repeats 来显示您想要的结果 使用 css，每个宽度的 25%。 【参考方案1】：您可以使用过滤器limitTo
ng-repeat="item in items | limitTo:4"
更新：这应该可以工作
<ul ng-repeat="item in arr" ng-if="$index%4==0">
<li ng-repeat="item in arr|limitTo:4:$index" >
item
</li>
</ul>
Plnkr
【讨论】：
在这种情况下不是。例如，如果我的数组中有 80 个项目，我想显示 20 个 UL，每个 UL 中有 4 个 LI。 已更新解决方案【参考方案2】：在您的控制器中试用此示例：
var list = '1','2','3','4','5','6','7','8','9','10','11','12','13','14','15';
// Using lodash
var chunkedList = _.chunk(list, 4);
在您的 HTML 中：
<ul ng-repeat="items in chunkedList">
<li ng-repeat="item in items">Object item</li>
</ul>
【讨论】：
【参考方案3】：没有测试但试一试：
<ul ng-repeat="n in getNumber(number)">
<li ng-repeat="item in items | limitTo:4:n*4">object 1</li>
</ul>
JS
$scope.number = Math.round(items.length/4);
scope.getNumber = function(num)
return new Array(num);
【讨论】：
【参考方案4】：基本思想是将你的数组分块为多维数组，然后ng-repeat它两次嵌套结构。
如果您想更改块编号，您可以将其更改为您喜欢的任何整数。
Live demo 在这里。
HTML
<body ng-app="myApp" ng-controller="MainCtrl as ctrl">
<ul ng-repeat-start="chunk in ctrl.chunkList">
<li ng-repeat="item in chunk">item</li>
</ul>
<hr ng-repeat-end/>
</body>
JS
angular
.module('myApp', [])
.controller('MainCtrl', [function()
var self = this;
var listLength;
var groupNum;
var i;
self.list = [
'item1', 'item2', 'item3', 'item4', 'item5',
'item6', 'item7', 'item8'
];
listLength = self.list.length;
groupNum = (listLength % 4 === 0)? listLength / 4 : Math.ceil(listLength / 4);
self.chunkList = [];
for (i = 0; i < groupNum; i++)
self.chunkList[i] = self.list.slice(i * 4, (i + 1) * 4);
]);
另外请注意，如果您不需要循环中的其他元素，您可以删除 ng-repeat-start 和 ng-repeat-end 并直接使用 ng-repeat。
<body ng-app="myApp" ng-controller="MainCtrl as ctrl">
<ul ng-repeat="chunk in ctrl.chunkList">
<li ng-repeat="item in chunk">item</li>
</ul>
</body>
注意事项
这种方法类似于@Shivas Jayram 的方法，但不需要underscore 库。
【讨论】：
完美！奇迹般有效。谢谢！ :) 绝对是我的荣幸 :)以上是关于AngularJS ng-repeat rows/ul的主要内容，如果未能解决你的问题，请参考以下文章
ng-repeat angularJS 中的 ng-repeat
ng-repeat 内的 ng-repeat 和每个项目的 td - AngularJS