理解 ngRepeat 'track by' 表达式

IT技术 javascript angularjs angularjs-ng-repeat
2021-03-19 17:59:54

我很难理解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>
3个回答

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>
这个问题很老,但我仍然认为这可能有助于更好地理解 bennadel.com/blog/...此处解释的简短版本 docs.angularjs.org/error/ngRepeat/dupes
2021-04-28 17:59:54
感谢您的回答!但肯定重复的标识符不是唯一的用例。我也想知道“幕后”发生了什么。
2021-05-08 17:59:54
要考虑的另一件事是,如果您可以按键使用跟踪,您将获得更好的性能(blog.500tech.com/is-reactjs-fast)。此功能允许您使用唯一标识符将 JavaScript 对象与 ngRepeat DOM(文档对象模型)节点相关联。有了这个关联,AngularJS 就不会不必要地 $destroy 和重新创建 DOM 节点。这可以带来巨大的性能和用户体验优势(bennadel.com/blog/...)。
2021-05-08 17:59:54
嗯,这很简单:看看代码,它都是开源的;)
2021-05-15 17:59:54
我有一个包含 700 件奇怪物品的清单。渲染时间从 4 秒变为 100 毫秒。Track by 应该用于所有基于rest 数据的ngRepeat。
2021-05-16 17:59:54

一个简短的总结:

track by 用于将您的数据与 ng-repeat 生成的 DOM 生成(主要是重新生成)链接起来。

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

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

通常,没有track byangular 将通过将 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 在 angular > 1.2 中可用)

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

任何参考资料可以证明这一点?
2021-04-24 17:59:54
有没有办法强制重新渲染?或任何其他解决方法?我在任何地方都没有发现这一点,但我相信这是给我造成混乱的原因,我已经浪费了很多时间。
2021-05-11 17:59:54
要么不使用 track by 要么更改更改对象上的唯一标识符。请注意,您不能更改 $index,建议不要使用 $index 而是使用对象唯一的标识符(例如 id)
2021-05-15 17:59:54