ngRepeat

ng-repeat 是 Angular 中的內建指令，它允許你迭代陣列或物件，並使你能夠為集合中的每個項重複一次元素。

ng-重複一個陣列

<ul>
    <li ng-repeat="item in itemCollection">
       {{item.Name}}
    </li>
</ul>

其中：
item =集合中的單個項
itemCollection =你正在迭代的陣列

ng-重複一個物件

<ul>
    <li ng-repeat="(key, value) in myObject">
       {{key}} : {{value}}
    </li>
</ul>

其中：
key =屬性名稱
value =屬性
myObject =你正在迭代的物件的值

通過使用者輸入過濾 ng-repeat

<input type="text" ng-model="searchText">
<ul>
    <li ng-repeat="string in stringArray | filter:searchText">
       {{string}}
    </li>
</ul>

其中：
searchText =使用者希望通過
stringArray 過濾列表的文字 =字串陣列，例如 ['string', 'array']

你還可以通過為過濾器輸出為 as aliasName 指定別名來顯示或引用過濾後的專案，如下所示：

<input type="text" ng-model="searchText">
<ul>
    <li ng-repeat="string in stringArray | filter:searchText as filteredStrings">
       {{string}}
    </li>
</ul>
<p>There are {{filteredStrings.length}} matching results</p>

ng-repeat-start 和 ng-repeat-end

要通過定義起點和終點重複多個 DOM 元素，可以使用 ng-repeat-start 和 ng-repeat-end 指令。

<ul>
    <li ng-repeat-start="item in [{a: 1, b: 2}, {a: 3, b:4}]">
        {{item.a}}
    </li>
    <li ng-repeat-end>
        {{item.b}}
    </li>
</ul>

輸出：

• 1
• 2
• 3
• 4

始終用 ng-repeat-end 關閉 ng-repeat-start 非常重要。

變數

ng-repeat 還在表示式中公開這些變數

效能考慮因素

渲染 ngRepeat 會變慢，尤其是在使用大型集合時。

如果集合中的物件具有識別符號屬性，則應始終使用識別符號而不是整個物件，這是預設功能。如果沒有識別符號，你可以隨時使用內建的 $index。

<div ng-repeat="item in itemCollection track by item.id">
<div ng-repeat="item in itemCollection track by $index">

ngRepeat 的範圍

ngRepeat 將始終建立一個獨立的子範圍，因此如果需要在重複內部訪問父範圍，則必須小心。

這是一個簡單的示例，顯示如何在 ngRepeat 內的單擊事件中設定父作用域中的值。

scope val:  {{val}}<br/>
ctrlAs val: {{ctrl.val}}
<ul>
    <li ng-repeat="item in itemCollection">
        <a href="#" ng-click="$parent.val=item.value; ctrl.val=item.value;">
            {{item.label}} {{item.value}}
        </a>
    </li>
</ul>

$scope.val = 0;
this.val = 0;

$scope.itemCollection = [{
    id: 0,
    value: 4.99,
    label: 'Football'
},
{
    id: 1,
    value: 6.99,
    label: 'Baseball'
},
{
    id: 2,
    value: 9.99,
    label: 'Basketball'
}];

如果在 ng-click 只有 val = item.value，它將不會更新父範圍內的 val，因為隔離範圍。這就是使用 $parent 引用或 controllerAs 語法（例如 ng-controller="mainController as ctrl"）訪問父作用域的原因。

巢狀的 ng-repeat

你也可以使用巢狀的 ng-repeat。

<div ng-repeat="values in test">
    <div ng-repeat="i in values">
      [{{$parent.$index}},{{$index}}] {{i}}
    </div>
</div>

var app = angular.module("myApp", []);
app.controller("ctrl", function($scope) {
  $scope.test = [
    ['a', 'b', 'c'],
    ['d', 'e', 'f']
  ];
});

在這裡訪問子 ng-repeat 裡面的父 ng-repeat 索引，你可以使用 $parent.$index。