AngularJS：用动画交换 ng-repeater 中的两个项目

Question

我有一个项目列表，每个项目都有一个唯一的 id

$scope.arr = [{val:0,id:'a'},{val:1,id:'b'},{val:2,id:'c'}];

每个项目都根据它们的 $index 进行绝对定位

<div class="item" ng-repeat="item in arr track by item.id" 
ng-style="getAbsPos($index)" >{{item.id}}</div>

我想要的只是在数组中交换arr[0] 和arr[2]，并显示这个动作的移动动画。事实证明这非常困难。

我认为这个 css 可以工作，因为列表是由 id 跟踪的

.item{
    transition:all 3000ms;
}

但不知何故，角度决定只移动一个项目的dom并重新创建另一个（为什么？！）。结果，只有一个项目是动画的。

= 问题 =

是否有解决此问题的解决方案，因此两个项目在交换时都会被动画化？谢谢。

（必须实际交换项目在数组中的位置，以便始终通过正确的索引轻松访问）

= 查看 Plunker 演示 =

http://plnkr.co/edit/5AVhz81x3ZjzQFJKM0Iw?p=preview

Answer 1

在玩了之后，我确实找到了一个非常 hacky 的解决方案，它确实改变了数组中的项目顺序：

=创意=

1. 正如 Zack 和其他许多人所建议的那样，我们记录每个项目中的显示位置（item.x），用它来确定 dom 位置

   <div class="item" ng-repeat="item in arr track by item.id" 
   ng-style="getAbsPos(item.x)" >{{item.id}}</div>
   

2. swap时，先对数组重新排序，因为dom位置是由item.x决定的，而不是$index，所以不会触发动画；

    var a= arr[0];
    var c = arr[2];
    arr[0] = c;
    arr[2] = a; 
   

3. 以异步方式交换两个项目的 item.x 值（使用$timeout），因此 Angular 将第 2 步和第 3 步视为两个独立的 dom 更改，只有第 3 步会触发动画。

    $timeout(function(){
        var tempX = a.x;
    a.x = c.x;
    c.x = tempX;           
    },10)   
   

这可能会在执行批量交换操作时产生一些问题。但是对于用户触发的简单的两个项目交换（我的用例），它似乎工作正常。

如果有更好的解决方案请告诉我，谢谢。

=Plunker 演示=

http://plnkr.co/edit/Vjj9qCcoqMCyuOhNYKKY?p=preview

Answer 2

一个想法是使用您自己的左标记，而不是 $index。这是一个使用指令的示例，该指令监视您的对象 .left 属性。在这种情况下，如果您需要将其发布到服务器或其他东西，您可以使用 .left 在某个时候重新排序实际数组。这是随附的JSFIDDLE。

HTML

<div class="item" ng-repeat="item in list" move-to="item.left">{{item.id}} / {{$index}}</div>

module.controller('myCtrl', function($scope) { 
$scope.list = [
        {val:0, id:'a', left: 0},
        {val:1, id:'b', left: 100},
        {val:2, id:'c', left: 200}
    ];

    $scope.swap = function() {
        var a_left = $scope.list[0].left
        $scope.list[0].left = $scope.list[2].left;
        $scope.list[2].left = a_left;
    }
}) 

.directive('moveTo', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            scope.$watch(attrs.moveTo, function(newVal) {
                elem.css('left', newVal + "px"); 
            });
        }
    }
});