“通过$索引道”在NG-重复使用时，NG-动画动画错误的项目 [英] ng-animate animate wrong item when using 'track by $index' in ng-repeat

问题描述

我想创建一个用户可以选择不同类型的块和堆叠在一起，创造出独特模板的应用程序。

I am trying to create the application that user can choose different types of block and stack them together to create unique template.

因为我希望用户能够同一块多次添加到模板，我有'由$索引道'使用来实现：

Since I want the user be able to add same block into the template multiple times, I have to use 'track by $index' to accomplish this:

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

然而，当我试图用NG-动画添加动画，去除块动画模板，而不是删除块动画最后一块上。我把code在这里的jsfiddle http://jsfiddle.net/FC9c7/6/ 。

尽量选择布局1，2或3。增加新的模块，当你点击删除块，你会看到这个问题。

Try adding new block by choosing layout 1, 2, or 3. And when you click 'remove block' you will see the problem.

推荐答案

下面是什么，我相信它的发生：因为你通过他们的指数跟踪的物品，每次你删除一个从列表中，什么样的变化是指数最后一个元素，使得角度认为，这是一个被移除的。当你打印下该指数的元素也有点明显。看看此内容修改的jsfiddle。

Here's what I believe it's happening: since you're tracking the items by their indices, every time you remove one from the list, what changes is the index of the last element, making Angular believe that it was the one removed. That becomes sort of obvious when you print the index next to its element. Take a look at this modified jsFiddle.

一个解决办法是创建具有唯一ID的新元素，然后通过这些ID追踪：

One solution would be to create new elements with unique ids and then track by those ids:

的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'">

。

但是，因为它创造了新的元素，你将无法保持同步与原来的对象，我不知道这是否是可以接受你。

But since it creates new elements, you won't be able to keep them in sync with the original object, and I don't know whether that's acceptable to you.

我会尝试看看是否在角1.2 RC1新的动画系统解决这方面的问题，如果我找到的东西我会更新这个答案。但我不相信它，虽然。 （

I'll try to check out if the new animation system in Angular 1.2 RC1 solves this particular problem and if I find out something I'll update this answer. But I'm not confident it does, though. :(

这篇关于“通过$索引道”在NG-重复使用时，NG-动画动画错误的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！