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']
您还可以通过为过滤器输出分配一个别名来显示或引用其他地方的过滤项asaliasName，如下所示：
<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也将这些变量暴露在表达式中
性能考量
渲染ngRepeat可能会变慢，尤其是在使用大型集合时。
如果集合中的对象具有标识符属性，则应始终trackby使用标识符而不是整个对象，这是默认功能。如果不存在标识符，则始终可以使用内置的$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="mainControllerasctrl"）访问父范围的原因。
嵌套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。