如何动画在NG重复NG-离开了正确的元素？ [英] How to animate ng-leave the correct element in a ng-repeat?

问题描述

我有一个非常酷的动画NG-进入。
但是，在重复取出一个具体项目的时候，我也希望它有一个很酷的动画离开。每个项目都有一个删除按钮，删除该数组中的项目。

I'm having a really cool animation on ng-enter in a ng-repeat. However, when removing a specific item in the repeat, I also want it to leave with a cool animation. Each item has a delete button, which deletes the item from the array.

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

问题是，动画只发生在重复的最后一个项目，不管我试图删除哪个项目。
我想这仅仅是渲染的问题，但游荡，如果有人为它的黑客。我尝试了一些，但没有运气还...

The problem is that the animation happens only for the last item in the repeat, regardless of which item I'm trying to remove. I guess this is just a problem of the rendering, but was wandering if someone has a hack for it. I tried some but no luck yet...

推荐答案

这是预期的结果使用通过跟踪指数$时。

如果您例如有收集十个项目，最后一个项目都会有$指数9.取下之一，无所谓哪一个，最后一个将拥有$指数8.这意味着不再是以$指数9，和你被$指数，即previously有$指数9将被删除相关的DOM元素的跟踪。

If you for example have ten items in the collection, the last item will have $index 9. Remove one, doesn't matter which one, and the last one will now have $index 8. This means there no longer is an element with $index 9, and as you are tracking by $index, the associated DOM element that previously had $index 9 will be removed.

您要么需要通过通过实际涉及到具体元素的属性来删除曲目或曲目。

You either need to remove the track by or track by a property actually related to specific element.

例如：

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

演示与轨道由$指数： http://plnkr.co/edit/Y2aGC2GOEIIDoxuVQmCA?p=$p$pview

演示与按部就班地进行，对象的属性： http://plnkr.co/edit/xGhQ3mYIhvmwZWxnEer1?p=$p$pview

这篇关于如何动画在NG重复NG-离开了正确的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！