AngularJS ng-repeat rows / ul
[英]AngularJS ng-repeat rows/ul
问题描述
我有一个包含各种对象的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）我该怎么做？
谢谢！
4 个解决方案
解决方案1
4 已采纳 2015-04-26 02:20:23
解决方案2
2 2015-04-26 02:33:45
试试这个样本，在你的控制器中：
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
1 2015-04-26 02:36:16
没试过，试试看：
<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
1 2015-04-26 03:26:44
基本思想是将数组块化为多维数组，然后使用嵌套结构对其进行两次ng-repeat 。
如果您想更改块数，您可以将其更改为您喜欢的任何整数。
现场演示在这里。
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在放行期间显示更多行
[英]Angularjs - In navigation ng-repeat display more rows during randering
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.