How to trigger an ng-move with angular-animate when reordering an array?

Question

Using angular 1.2.4 I'm trying to figure out how to trigger ng-animate's move when a repeated item is reordered. I know the ng-animate is working because the animation for enter, leave, and move are all triggered when a filter is applied. However, when I use some array methods to reorder the array, no animations are triggered. I suspect part of the problem is that I am actually removing and adding elements to the array with this method, not really 'moving' them:

  $scope.moveDown = function(order){
    var temp = $scope.names[order];
    $scope.names.splice(order, 1);
    $scope.names.splice(order+1, 0, temp);
  }

Here is a plunker that shows what I'm up to: http://plnkr.co/edit/SuahT6XXkmRJJnIfeIO1?p=preview

Click on any of the names to have it move down the list.

Is there a way to reorder the array without splicing? Or else to manually trigger a move animation when the $index of an item changes?

PSL · Accepted Answer · 2014-10-01 16:16:16Z

4

Try giving a gap (In digestion) between removal and insertion, that will get the ng-enter and ng-leave animations to kick in.

    var temp = $scope.names.splice(order, 1).pop();
    $timeout(function(){
       $scope.names.splice(order+1, 0, temp);
    });

Plnkr

If you want to avoid using timeout, restructure your data a bit, make it array of objects (which is always desirable anyways) and do:-

ViewModel:-

  $scope.names = [{'name':'Igor Minar'}, {'name':'Brad Green'}, {'name':'Dave Geddes'}, {'name':'Naomi Black'}, {'name':'Greg Weber'}, {'name':'Dean Sofer'}, {'name':'Wes Alvaro'}, {'name':'John Scott'}, {'name':'Daniel Nadasi'}];

In the handler:-

  $scope.moveDown = function(order){
    var itm  = $scope.names.splice(order+1, 1).pop(); //Get the item to be removed
    $scope.names.splice(order, 0, angular.copy(itm)); //use angular.clone to get the copy of item with hashkey
  }

2 things are important here, you would need to use angular.clone so that default tracker property ($$hashkey) will be removed from the shifting item,it seems like only when the item is removed and new item is inserted (based on tracker property) angular adds the animation classes to it. You cannot do it with primitive as you originally had.

Plnkr2

edited Oct 1, 2014 at 16:16

answered Oct 1, 2014 at 2:01

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

rakitin Over a year ago

thanks! and with a little mashing around made the animation look like it's moving down: Plunker

PSL Over a year ago

@tim that is exactly what i had tried before too, then thought against it... :)

rakitin Over a year ago

What did you do wind up doing as an alternative? Using $timeout always feels hacky to me

PSL Over a year ago

Using $timeout is always a hack, it is just used to delay addition operation till next digest cycle for animation to happen.. :D However if you do it together the same digest cycle will perform removal and addition of same item in the array and no classes gets added. I will try out something when i get some time..

PSL Over a year ago

@tim DId you look at the update? Are you satisfied with that?

|

Collectives™ on Stack Overflow

How to trigger an ng-move with angular-animate when reordering an array?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related