angular js ng-重复行/ul

Question

我有一个包含各种对象的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)，我如何才能做到这一点？

谢谢你！

Answer 1

没有测试，但尝试了一下：

<ul ng-repeat="n in getNumber(number)">
        <li ng-repeat="item in items | limitTo:4:n*4">object 1</li>
</ul>

射流研究…

$scope.number = Math.round(items.length/4);
scope.getNumber = function(num) {
    return new Array(num);   
}

Answer 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>

Answer 3

您可以使用筛选器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>

Plnker公司