使用slideUp动画从DOM中删除元素

Question

我想从控制器中的数据中删除元素，并且应该使用slideUp动画从DOM中删除node-element。

我试过控制器：

$scope.remove = function (i) { $scope.items.splice(i, 1); };

我的plnkr尝试使用ngAnimate

但它完全错了。

通过$scope.items.splice(i, 1);删除数组中的项目，是否有足够的方法从DOM中删除带动画的HTML元素？??！

这是骨干实施：

initialize: function () {
    var that = this;
    collection.on('destroy', function (model) {
        that.$('.items[data-id="' + model.id + '"]').stop().slideUp();
    });
},
remove: function (e) {
    var el = $(e.currentTarget);
    var id = el.data('id');
    collection.get(id).destroy()
},

我的plkr中的ngAnimate是完全错误的：

Answer 1

我认为动画在这里不起作用的原因不是因为您删除HTML元素的方法，而是因为ng-repeat的跟踪行为。

此plnkr是您提供的修改版本。我已经删除了$ index＆＃39;并为每个列表项显示绑定的$ index，如下所示：

<li class="slide" ng-repeat="item in things">{{$index}} {{item}}<a href="#" ng-click="$event.preventDefaul(); removeThing($index)">Remove thing</a></li>

如果您只关注我添加到每个列表项的$ index值，则删除项目将显示为始终删除最后一项。因此，这似乎是您在使用＆$ 39;跟踪$ index＆＃39;时看到最后一件事被删除的原因。

请注意，我只是使用默认跟踪行为，但由于ng-repeat不允许在数组中使用重复项，因此在您尝试添加的内容已存在的情况下，它不起作用。如果您查看ng-repeat found here的API参考，似乎有很好的示例可以使用其他方式跟踪＆＃39;跟踪＆＃39;。

希望这有帮助。