如何动画ng-在ng-repeat中保留正确的元素?

时间:2014-05-10 16:26:02

标签: angularjs ng-animate

我在ng-repeat中使用ng-enter制作了一个非常酷的动画。 但是,当删除重复中的特定项目时,我还希望它留下一个很酷的动画。每个项目都有一个删除按钮,用于从数组中删除该项目。

bill.items = _.reject(bill.items,item);

问题是动画只发生在重复的最后一项,无论我试图删除哪一项。 我想这只是渲染的一个问题,但是如果有人对它进行了破解就会徘徊。我尝试了一些但没有运气......

1 个答案:

答案 0 :(得分:9)

这是使用track by $index时的预期结果。

例如,如果您在集合中有十个项目,则最后一个项目将具有$ index 9.删除一个,不管哪一个,最后一个现在将具有$ index 8.这意味着没有more是一个带有$ index 9的元素,当你按$ index跟踪时,之前有$ index 9的关联DOM元素将被删除。

您需要删除track by或跟踪与特定元素实际相关的属性。

示例:

<li ng-repeat="item in items track by item.id">

通过$ index跟踪演示: http://plnkr.co/edit/Y2aGC2GOEIIDoxuVQmCA?p=preview

按对象属性进行演示: http://plnkr.co/edit/xGhQ3mYIhvmwZWxnEer1?p=preview