关于angularjs：ng-repeat 集合发生变化时重建DOM


Rebuild of DOM when collection of ng-repeat changes

我在另一个堆栈溢出帖子中读到，当 ng-repeat 中使用的集合发生变化时 angular.js 会尝试变得聪明，因此 DOM 不会完全重建(请参阅Does ng-repeat retain DOM elements or create all new当收藏发生变化时？)。但是我遇到了一个问题：当我从我的集合中删除一个项目时，该项目之后的所有项目都会在 DOM 中重建。这对我来说是有问题的，因为我列出了 jQuery 删除事件并且该事件被多次触发，尽管只有一个项目被删除。监听 scope.$on('remove') 可以解决我的问题 - 这只会触发一次 - 但这是我的问题，我想在删除之前访问 jQuery data，当触发 scope.$on('remove') 时，data 已经被删除了。

我可以做些什么来解决这个问题？有关演示，请参阅此链接：http://plnkr.co/edit/T1ZicU20JjWYk1J5ch7Z?p=preview。

1
2
3
element.bind('remove', function() {
  alert("Element remove handler called.");
});

当我删除第三个元素时，remove 已经被触发一次，当我删除第二个元素时，它被触发两次，当我删除第三个元素时，它被触发三次。

只需添加 track by 即可解决此问题：
ng-repeat="w in widgets track by $index"

解释：
当您添加 track by 时，您基本上告诉 Angular 为给定集合中的每个数据对象生成一个 DOM 元素。这在分页和过滤时很有用，或者在 ng-repeat 列表中添加或删除对象的任何情况下。

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

相关讨论