了解ngRepeat的“跟踪依据”表达

我很难理解angularjs中ng-repeat表达式的轨迹是如何工作的。该文档非常稀缺：http : //docs.angularjs.org/api/ng/directive/ngRepeat

您能解释一下这两个代码片段在数据绑定和其他相关方面的区别吗？

与： track by $index

<!--names is an array-->
<div ng-repeat="(key, value) in names track by $index">
  <input ng-model="value[key]">                         
</div>

没有（相同的输出）

<!--names is an array-->
<div ng-repeat="(key, value) in names">
   <input ng-model="value[key]">                         
</div>

你可以track by $index，如果您的数据源中有重复的识别码

例如： $scope.dataSource: [{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]

使用“ id”作为标识符时，您不能迭代此集合（重复的id：1）。

不会工作：

<element ng-repeat="item.id as item.name for item in dataSource">
  // something with item ...
</element>

但是可以，如果使用track by $index：

<element ng-repeat="item in dataSource track by $index">
  // something with item ...
</element>

简短摘要：

track by 用于将数据与ng-repeat生成的DOM生成（主要是重新生成）链接。

当您添加时，track by您基本上会告诉angular为给定集合中的每个数据对象生成一个DOM元素

这在分页和过滤时，或在ng-repeat列表中添加对象或从列表中删除对象的任何情况下都非常有用。

通常，没有track by角度的情况是通过将expando属性-注入$$hashKey到JavaScript对象中来将DOM对象与集合链接起来，并且每次更改都会重新生成它（并重新关联DOM对象）。

完整说明：

http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

更实用的指南：

http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

（track by在角度> 1.2中可用）

如果您正在使用按标识符（例如$ index）而不是整个对象进行跟踪的对象，并且稍后再加载数据，则ngRepeat 将不会为其已呈现的项重建DOM元素，即使该集合中的JavaScript对象具有被新的代替。