How to animate ng-leave the correct element in a ng-repeat?

Question

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...

Answer 1

This is the expected result when using track by $index.

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.

Example:

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

Demo with track by $index: http://plnkr.co/edit/Y2aGC2GOEIIDoxuVQmCA?p=preview

Demo with track by object property: http://plnkr.co/edit/xGhQ3mYIhvmwZWxnEer1?p=preview