嵌套循環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"}
        ]
    }
]

我打算通過一些簡單的數據綁定遍歷它

ng-repeat="person in arrayCtrl.people"

Answer 1

將您的人員數組分塊到控制器中。

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>

Answer 2

我不確定您到底想要什么，但是您可以嘗試以下操作：

<div ng-repeat="person in arrayCtrl.people">
   <div class="name"> {{ person.name }} </div>
   <div class="skills" ng-repeat="skill in person.skills">
       {{ skill.name }}
   </div>
</div>