angularjs

Animating ng-repeat index changes using custom directive

This forked Plunker shows two ng-repeats each displaying an array as a list. Each list item uses a custom directive to animate whenever an up or down arrow is clicked.

The first list, which records changes to array item values animates correctly but the second, which records changes to array item indexes does not.

How can I edit the directive to animate the second list correctly?

Solution

  • The way you move the elements triggers incorrect animation. Try to do it like this

    function arrayMove(arrayVar, from, to) {
    var item = arrayVar.splice(from, 1).pop();
    arrayVar.splice(to, 0, angular.copy(item));
}

    You need to make a (deep) copy of the element to preserve some properties like $$hashkey used by AngularJS to track the objects.