ng使用'跟踪$index'在ng重复中

ng-animate animate wrong item when using 'track by $index' in ng-repeat

本文关键字：ng 跟踪 使用 index      更新时间：2023-09-26

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

由于我希望用户能够多次将同一块添加到模板中，我必须使用"trackby$index"来实现这一点：

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

但是，当我尝试使用ng animate添加动画时，用于移除块的动画在模板中的最后一个块上而不是移除块上设置动画。我把代码放在jsfiddle这里http://jsfiddle.net/FC9c7/6/.

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

以下是我认为正在发生的事情：由于您正在根据项目的索引跟踪项目，每次从列表中删除一个项目时，更改的是最后一个元素的索引，使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中的新动画系统是否解决了这个特定的问题，如果我发现了什么，我将更新这个答案。但我不相信它会这样（

在将对象添加到所选列表之前，您可以复制该对象。通过这种方式，您可以通过$id（已选择）进行跟踪，这是默认值。您正在将相同的对象添加到所选列表中，因此angular将在中继器中看到重复的ng repeat。

更改addlayout函数如下，并删除ng repeat中的track-by-expression。这只是另一个解决方案。在大型对象中，执行深度复制可能没有意义。

$scope.add_layout = function(new_layout) {
    $scope.chosenlist.push(angular.copy(new_layout));

}；

相关文章：