AngularJS 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-start与保持联系很重要ng-repeat-end。

变数

ng-repeat 也将这些变量暴露在表达式中

变量	类型	细节
$index	数	等于当前迭代的索引（$index === 0将在第一个迭代的元素上为true；请参见$first）
$first	布尔型	在第一个迭代元素上评估为true
$last	布尔型	在最后一个迭代的元素上评估为true
$middle	布尔型	如果元素在$first和之间，则评估为true$last
$even	布尔型	在偶数次迭代（等于$index%2===0）时评估为true
$odd	布尔型	在奇数次迭代（等于$index%2===1）时评估为true

性能考量

渲染ngRepeat可能会变慢，尤其是在使用大型集合时。

如果集合中的对象具有标识符属性，则应始终track by使用标识符而不是整个对象，这是默认功能。如果不存在标识符，则始终可以使用内置的$index。

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

ngRepeat的范围

ngRepeat 将始终创建一个隔离的子作用域，因此如果需要在重复操作内访问父作用域，则必须小心。

这是一个简单的示例，显示了如何通过中的click事件在父范围中设置值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'
}];

如果仅存在val = item.value，ng-click则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。