理解ngRepeat'track by'表达式

Question

我很难理解如何通过 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>

Answer 1

你可以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>

Answer 2

简短摘要:

track by 用于将您的数据与ng-repeat生成的DOM生成(主要是重新生成)相关联.

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

这在分页和过滤时,或者在ng-repeat列表中添加或删除对象的任何情况下都很有用.

通常,没有track byangular会将DOM对象与集合链接起来,方法是将一个expando属性 - 注入$$hashKey到JavaScript对象中,并将其重新生成(并重新关联一个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/

(履带由角度> 1.2提供)

Answer 3

如果您正在使用标识符跟踪对象(例如$ index)而不是整个对象,并且稍后重新加载数据,则ngRepeat 将不会为已呈现的项重建DOM元素,即使集合中的JavaScript对象具有取代了新的.