Question

使用角度1.2.4 我正在试图找出重新排序重复项目时如何触发ng-animate的移动。我知道ng-animate正在运行，因为在应用过滤器时会触发进入，离开和移动的动画。但是，当我使用一些数组方法重新排序数组时，不会触发任何动画。我怀疑问题的一部分是我实际上是用这种方法删除并向数组中添加元素，而不是真的“移动”它们：

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

这是一个能够展示我的目标：http://plnkr.co/edit/SuahT6XXkmRJJnIfeIO1?p=preview

点击任何名称，让它在列表中向下移动。

有没有办法在没有拼接的情况下重新排序数组？或者，当项目的$ index改变时手动触发移动动画？

Answer 1

尝试在删除和插入之间给出一个间隙（在消化中），这将使ng-enter和ng-leave动画启动。

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

<强> Plnkr

如果你想避免使用超时，重新调整你的数据，使它成为对象数组（无论如何总是可取的）并做： -

视图模型： -

  $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
  }

这里有两件事很重要，你需要使用angular.clone，这样才能从移动项目中移除默认跟踪器属性（$$hashkey），看起来只有当项目被移除并且新项目是插入（基于跟踪器属性）angular将动画类添加到其中。你不能像原来那样使用原语。

<强> Plnkr2

重新排序数组时如何使用角度动画触发ng-move？

1 个答案: