angular.js - How to limit the output of ng-repeat?

Question

Now I encounter such a requirement: there is an array

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

Now we need it to output

<ul>
    <li>a1</li><li>a2</li><li>a3</li><li>a4</li><li>a5</li><li>a6</li><li>a7</li><li>a8</li><li>a9</li><li>a10</li> //10个
</ul>
<ul>
    <li>a11</li><li>a12</li><li>a13</li><li>a14</li><li>a15</li><li>a16</li><li>a17</li><li>a18</li><li>a19</li><li>a20</li> //10个
</ul>
<ul>
    <li>a21</li><li>a22</li>... //10个
</ul>

I want to use ng-repeat to output, and the solution I came up with is to first divide the array length by 10

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

Then ng-repeat outputs n uls, and then ng-repeat 10 items in uls respectively.

Then the question is, how can ng-repeat output n uls?

<ul ng-repeat=" ...不会写... ">
    <li ng-repeat = " item in items | ...//如何过滤">
        {{item.name}}
    </li>
</ul>

Ask the experts from all walks of life!

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

First of all, the css is no longer movable, because the style has been written according to the product requirements, and the result is that each line requires 10 li.
After seeing the reminder from friend @zchq88, I immediately made a filter to convert a one-dimensional array into a two-dimensional array, like @Chobits did.
But an error was reported.

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

console.log() will find that the array has been executed N times.
Google did not find the cause or solution.
My guess is that when the array is split, the guide data causes repeated dirty checks.
I tried angular.copy but it also failed. I am now looking for other solutions.
Thanks again! We look forward to students coming up with other solutions!

解决！最后一次更新：

Because the actual structure of items in the product is

$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多个
        ]
    },
    ....
]

Bypasses the problem of repeated dirty checks caused by adding filters in HTML. According to the filter provided by @Chobits, the group is filtered in the controller

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

Then output with ng-repeat and the problem is solved.

<p ng-repeat = "input in group">
    <ul ng-repeat="items in input.items">
        <li ng-repeat="item in items">
            {{item.name}}
        </li>
    </ul>
</p>

prefect! thanks everyone!

Answer 1

//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'}....
        ]
    },
    ....
]

---

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

Answer 2

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:
Yes, I agree with this
Let’s layout it. Displaying several in one line can be done with css. There are so many methods that I’m too lazy to write

Answer 3

Why not just turn ITEMS into a 2-dimensional array using JS? And then output?

Answer 4

Just organize the data into a tree structure. . .
For example

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

Then use double layer repeat in ng

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