Animating ng-move in AngularJS ngRepeat is animating the wrong items

Question

I'm a little flummoxed when it comes to animating ng-move in an ng-repeat. If I move an array item from 3 to 7 for instance, items 4-7 get shifted up and they animate. However the actual item I moved from 3 and placed in position 7, does not. Here's a plunkr demonstrating my issue.

http://plnkr.co/edit/4yRkLWbsU57YxrYOrWUQ?p=preview

Moving item 7 to 3, however, works as I expect, animating the single moved item, and not the items that have been pushed down.

This is not very useful for showing a user what moved. How should someone properly animate an ng-move?

Zurn

Chris, any progress on this? – Cityscape

Nope, sorry. I ended up finding this issue on github but I never got a satisfactory course of action. github.com/angular/angular.js/issues/5160 – Zurn

upvote for using the (highly under-rated) term "flummoxed" – Semasiology

Answer 1

@tasseKat has an excellent answer, which explains the behavior you observed: https://mcmap.net/q/741301/-example-of-nganimate-for-smoothly-sorting-an-ng-repeat

However, his solution is not as simple as you would wish... but so far I haven't found anything better.

Tilt

Answer 2

The correct syntax is

arrayVar.splice(to, 0, arrayVar.splice(from, 1));

To remove and return an element at the index i of array arr, use arr.splice(i, 1),

Preiser

Thanks for the quick answer. Unfortunately, that appeared to work because it triggered ng-enter and ng-leave. I updated the plunkr to show the animations differently. – Zurn

@Zurn I didn't get it. I think my fix still works. You don't need [0] – Preiser

By returning array.splice(i, 1), you are returning an array, not the element. This triggers the ng-leave/ng-enter, not the ng-move transitions in AngularJS. The plunkr is just the simplest case I could do to illustrate that ng-move (which is actually triggered during a sort in my real code) is not animating the actual moving item. I updated the plunkr to show leave/enter/move as red/green/blue. It's the blue animations that are my problem. I'm sorry for the confusion. – Zurn