通过expression式理解ngRepeat'track'
我很难理解如何通过在angularjs中的ng-repeatexpression式的轨迹工作。 文档非常稀less: http : //docs.angularjs.org/api/ng/directive/ngRepeat
你能解释一下这两段代码之间的区别在于数据绑定和其他相关方面吗?
track by $index
: 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
进行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
列表中添加或删除对象的任何情况下都很有用。
通常情况下,如果没有angular度track by
将通过向您的JavaScript对象注入expando属性( $$hashKey
将DOM对象与集合关联起来,并在每次更改时重新生成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/
(跟踪是可用的angular度> 1.2)
如果你正在使用标识符 (例如$ index) 跟踪对象,而不是整个对象,并且稍后重新加载数据,那么即使集合中的JavaScript对象具有已经呈现的项目,ngRepeat 也不会重build它的DOM元素被replace为新的。