angularjs - 重新排序数组时如何使用angular-animate触发ng-move？

Question

使用 Angular 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);
  }

这是一个显示我在做什么的 plunker: 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

如果您想避免使用超时，请稍微重组您的数据，使其成为对象数组(无论如何这总是可取的)并执行:-

View 模型:-

  $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 )，似乎只有在删除项目并插入新项目时(基于跟踪器property) angular 向其添加动画类。你不能像原来那样用原始的来做。

Plnkr2