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

小编典典

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

angularjs

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

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

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

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

尝试通过选择布局1、2或3添加新块。单击“删除块”后，您将看到问题。

阅读 177

2020-07-04

共1个答案

小编典典

我认为这是正在发生的事情：由于您正在按项目的索引跟踪项目，因此每次您从列表中删除一项时，最后一个元素的索引都会发生什么变化，从而使Angular认为它是被删除的项目。当您在索引的元素旁边打印索引时，这变得很明显。看看这个修改过的jsFiddle。

一种解决方案是创建具有唯一ID的新元素，然后按这些ID进行跟踪：

Java脚本

$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中的新动画系统是否解决了此特定问题，如果我发现有什么问题，将更新此答案。但我不确定这样做。:(

2020-07-04