如何重新排序数组时触发NG-招用角动画？ [英] How to trigger an ng-move with angular-animate when reordering an array?

问题描述

采用了棱角分明1.2.4
我试图找出如何在重复的项目重新排序触发NG-动画的举动。我知道NG-动画工作，因为当应用滤镜的进入，离开，移动动画都触发。然而，当我使用一些阵列方法重新排序阵列，没有动画被触发。
我怀疑是问题的一部分是，我居然删除和添加元素到数组用这种方法，而不是真的'移动'他们：

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);
  }

下面是一个plunker这显示了我到：的http：// plnkr.co/edit/SuahT6XXkmRJJnIfeIO1?p=$p$pview

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?

推荐答案

先给删除和插入之间的空隙（消化），将获得 NG-输入和 NG-休假动画在踢。

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

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

视图模型： -

  $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'}];

在处理程序： -

  $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的事情都在这里重要的是，你需要使用angular.clone以便默认跟踪属性（ $$ 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

Plnkr2

这篇关于如何重新排序数组时触发NG-招用角动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！