javascript - 嵌套循环 Angular.JS 使用复杂的嵌套循环

Question

我正在尝试使用 Angular.JS 循环遍历数据，但我不知道如何循环遍历具有特定格式的数据

我将使用 Java 来解释我正在尝试做的事情

示例代码:

int itemCount = 0;
for(int i = 0; i < JSON.length(); i = i + 3) {
    //Loop through this bit of html for every 3 items
    //this is a row
    <div class="row">
    for (int y = itemCount; y < JSON.length(); y++) {
        //This is an item
        <div class="item">
            <!--Some HTML for an item-->
        </div>
        itemCount = y;
    }
    </div>
    itemCount++;
}

本质上，我试图遍历所有项目，每三个项目创建一个新行，因此 HTML 看起来像这样:

<div class="row">
    <div class="item">
        <h1>{{person1.name}}</h1>
    </div>
    <div class="item">
        <h1>{{person2.name}}</h1>
    </div>
    <div class="item">
        <h1>{{person3.name}}</h1>
    </div>
</div>
<div class="row">
    <div class="item">
        <h1>{{person4.name}}</h1>
    </div>
    <div class="item">
        <h1>{{person5.name}}</h1>
    </div>
    <div class="item">
        <h1>{{person6.name}}</h1>
    </div>
</div>
...
etc.

Angular 循环看起来像这样:

<div class="people" ng-repeat="person in personCtrl.people">
     <div class="row" ng-repeat="
                    <!--Create a new row for every three people-->">
         <h1>{{person.name}}</h1>
         <p>{{person.occupation}}</p>
         ...
     </div>
</div>

我知道你必须使用 ng-repeat，但我不明白我如何在 Angular.JS 中获得这种循环

感谢任何帮助。

编辑:

这是我的数组格式

var people = [
    {
        "name" : "jeff"
        "occupation" : "developer"
        "skills" : [
            {"name" : "Ruby"}
        ]
    }
]

我正计划用一些简单的数据绑定(bind)来遍历它

ng-repeat="person in arrayCtrl.people"

Answer 1

Chunk 你在 Controller 中的 people 数组。

Array.prototype.chunk = function(chunkSize) {
    var array=this;
    return [].concat.apply([],
        array.map(function(elem,i) {
            return i%chunkSize ? [] : [array.slice(i,i+chunkSize)];
        })
    );
}

结果:

> [1,2,3,4,5,6,7].chunk(3)
[[1,2,3],[4,5,6],[7]]

如何在Angular.JS中实现

<div class="row" ng-repeat="chunk in Ctrl.chunks">
    <div class="item" ng-repeat="person in chunk.people">
             <h1>{{person.name}}</h1>
             ...
    </div>
</div>