理解 ngRepeat 'track by' 表达式

Understanding the ngRepeat 'track by' expression

本文关键字：表达式 by track ngRepeat 理解      更新时间：2023-09-26

我很难理解 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 Angular 将通过在 JavaScript 对象中注入 expando 属性 - $$hashKey - 将 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/

（在角度> 1.2 中提供跟踪方式）

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

相关文章：