如何动画在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屋!