在ng-repeat中使用'track by $ index'时,动画错误项目为ng-animate

Question

我正在尝试创建用户可以选择不同类型的块并将它们堆叠在一起以创建唯一模板的应用程序.

由于我希望用户能够多次将相同的块添加到模板中,因此我必须使用'track by $ index'来完成此操作:

<li ng-repeat="chosen in chosenlist track by $index">

但是,当我尝试使用ng-animate添加动画时,用于删除块的动画在模板中的最后一个块而不是删除块上进行动画处理.我把代码中的jsfiddle这里http://jsfiddle.net/FC9c7/6/.

尝试通过选择布局1,2或3来添加新块.当您单击"删除块"时,您将看到问题.

Answer 1

这就是我认为它正在发生的事情:因为你按照它们的索引跟踪项目,所以每次从列表中删除一个项目时,最后一个元素的索引会发生什么变化,使得Angular认为它是删除的那个.当您在其元素旁边打印索引时,这变得很明显.看看这个修改过的jsFiddle.

一种解决方案是创建具有唯一ID的新元素,然后通过这些ID进行跟踪:

使用Javascript

$scope.add_layout = function(new_layout) {
  new_layout = angular.copy(new_layout);
  new_layout.id = new Date().getUTCMilliseconds();
  $scope.chosenlist.push(new_layout);
};

HTML

<li ng-repeat="chosen in chosenlist track by chosen.id" ng-animate="'animate'">

jsFiddle 在这里.

但是由于它创建了新的元素,你将无法使它们与原始对象保持同步,我不知道你是否可以接受它.

我将尝试检查Angular 1.2 RC1中的新动画系统是否解决了这个特殊问题,如果我发现了什么,我会更新这个答案.但是我不相信它确实如此.:(