当ng-repeat集合发生变化时,重建DOM

时间:2015-10-25 20:47:25

标签: angularjs

我在另一个堆栈溢出文章中读到,当ng-repeat中使用的集合发生变化时,angular.js会尝试变聪明,这样就不会完全重建DOM(参见Does ng-repeat retain DOM elements or create all new ones when the collection changes?)。但是我遇到了一个问题:当我从我的集合中删除一个项目时,这个项目之后的所有项目都在DOM中重建。这对我来说是有问题的,因为我列出了jQuery remove事件,并且这个事件多次被触发,尽管只删除了一个项目。倾听scope.$on('remove')可以解决我的问题 - 这只会触发一次 - 但这是我的问题,我想在删除之前访问jQuery data并在scope.$on('remove')被触发时{{1}已经删除了。

我该怎么做才能解决这个问题?请参阅此链接以获取演示:http://plnkr.co/edit/T1ZicU20JjWYk1J5ch7Z?p=preview

data

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

1 个答案:

答案 0 :(得分:1)

只需添加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