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。