【问题标题】:How to animate ng-leave the correct element in a ng-repeat?如何在 ng-repeat 中为 ng-leave 正确元素设置动画?
【发布时间】:2014-05-11 18:12:21
【问题描述】:

我在 ng-repeat 中的 ng-enter 上有一个非常酷的动画。 但是,当删除重复中的特定项目时,我也希望它以很酷的动画离开。每个项目都有一个删除按钮,用于从数组中删除项目。

bill.items = _.reject(bill.items,item);

问题是动画只发生在重复中的最后一个项目上,而不管我要删除哪个项目。 我想这只是渲染的一个问题,但是如果有人对此有破解,我就会徘徊。我尝试了一些,但还没有运气......

【问题讨论】:

  • _.reject 的第二个参数不应该是谓词函数吗?您是否在 ng-repeat 中使用“track by”?
  • 没有。通过传递您要删除的对象来拒绝工作。我在这个中继器中使用 $index 跟踪,为什么?
  • 出于某种原因,我只是假设您使用的是 Underscore 的拒绝,但我猜是 Lo-Dash?

标签: angularjs ng-animate


【解决方案1】:

这是使用track by $index 时的预期结果。

例如,如果您在集合中有十个项目,最后一个项目的 $index 为 9。删除一个,不管是哪一个,最后一个现在的 $index 为 8。这意味着不再有$index 9 的元素,当您通过 $index 进行跟踪时,之前具有 $index 9 的关联 DOM 元素将被删除。

您要么需要删除track by,要么通过与特定元素实际相关的属性进行跟踪。

例子:

<li ng-repeat="item in items track by item.id">

由 $index 跟踪的演示: http://plnkr.co/edit/Y2aGC2GOEIIDoxuVQmCA?p=preview

按对象属性跟踪的演示: http://plnkr.co/edit/xGhQ3mYIhvmwZWxnEer1?p=preview

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-07-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-02-15
    • 1970-01-01
    • 2013-04-05
    相关资源
    最近更新 更多