angular.js - ng-repeat如何限数量输出？-PHP中文网问答

现在碰到这样一个需求：有一个数组

$scope.items = [
    {name:'a1'},{name:'a2'},{name:'a3'}....
]

现在需要它输出


    a1
a2
a3
a4
a5
a6
a7
a8
a9
a10 //10个


    a11
a12
a13
a14
a15
a16
a17
a18
a19
a20 //10个


    a21
a22... //10个

我想用ng-repeat输出，想出的方案是，先把数组 length 除以 10

$scope.n = Math.ceil ( items.length / 10 );

然后ng-repeat输出 n 个 ul，再分别在ul里 ng-repeat 10个item。

那么问题来了，如何ng-repeat输出n个ul？


    
        {{item.name}}

求问各路大神啦！

更新问题！感谢各位同行！

首先，css已经不可动了，因为根据产品需求已经写好了样式，并得到了每行需要10个li的结果。
看到@zchq88 这位朋友的提醒以后，我立刻做了一维数组转二维数组的过滤器，像@Chobits 同学那样的。
但是报错。

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

console.log() 会发现数组被执行了N遍过滤器。
google也没有找到原因和解决方案。
我猜测是，拆数组的时候，由于指引型数据，引发了重复脏检查。
实验了angular.copy也失败，现在正在找其他解决方案。
再次感谢！期待有同学提出其他解决方案！

解决！最后一次更新：

因为产品中items实际的结构是

$scope.group = [
    {
        key:888,
        items:[
            {name:'a1'},{name:'a2'},{name:'a3'}....,{name:'a13'}...//n多个
        ]
    },
    {
        key:999,
        items:[
            {name:'a1'},{name:'a2'},{name:'a3'}....,{name:'a33'}...//n多个
        ]
    },
    ....
]

绕开了html中加过滤器产生的重复脏检查问题。根据@Chobits 提供的过滤器,在控制器里对group进行了过滤

group.forEach(function(items){
    items.items  =  $filter('group')(items.items);
})

然后再ng-repeat输出，问题解决。


    

        
            {{item.name}}

prefect！thanks everyone！

//http://stackoverflow.com/a/14463190/2586541 app.filter('group', function () { return function (items, groupSize) { var groups = [], inner; for (var i = 0; i < items.length; i++) { if (i % groupSize === 0) { inner = []; groups.push(inner); } inner.push(items[i]); } return groups; }; });

$scope.group = [ { key:1, items:[ {name:'a1'},{name:'a2'},{name:'a3'}.... ] }, { key:2, items:[ {name:'a1'},{name:'a2'},{name:'a3'}.... ] }, .... ]

全部回复(4)

黄舟2017-05-15 17:00:29 4楼

<ul ng-repeat="g in group track by g.key">
    <li ng-repeat="item in g.items">
        {{item.name}}
    </li>
</ul>

赞 +0

添加回复

某草草2017-05-15 17:00:29 3楼

http://stackoverflow.com/questions/21644493/how-to-split-the-ng-repeat-data-with-three-columns-using-bootstrap

However, the most direct and just plainly simple way to get columns is to use CSS columns:
是的赞同这个
排一下版一行显示几个完全可以用css做方法多的都懒得写

某草草2017-05-15 17:00:29 2楼

为什么不直接把ITEMS用JS变成2维数组？然后输出？

仅有的幸福2017-05-15 17:00:29 1楼

把数据整理成树形结构即可。。。
比如

scope.list = [
{name:"a",children:[
    {name:'son1 of a'},
    {name:'son2 of a'}
    ]},
{name:"b",children:[
    {name:'son1 of b'},
    {name:'son2 of b'}
    ]}
]

然后ng里用双层repeat

<ul ng-repeat="item in list">
    <li ng-repeat = " son in item.children">
        {{son.name}}
    </li>
</ul>