從帶有滑動動畫的DOM中移除元素

Question

我想從控制器中的數據中移除元素，並且應該使用slideUp動畫從DOM中移除節點元素。

我試圖控制：

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

我plnkr與嘗試使用ngAnimate

但它的工作原理完全錯誤的。

是否有任何足夠的方法從DOM刪除HTML元素與動畫通過$scope.items.splice(i, 1); ??刪除項目！！？！

這是骨幹實現：

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() 
}, 

這是完全錯誤的ngAnimate在我plkr：

Answer 1

我認爲動畫是不是在這裏工作的原因，是不是因爲你方法刪除HTML元素，而是由於ng-repeat的跟蹤行爲。

此plnkr是您提供的修改版本。我已刪除了與綁定$指數「由$索引道」，以顯示各列表項如下：

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

如果只注重我已經加入到每一個列表項$索引值，去掉一個項目會出現，就像最後一個項目總是被刪除一樣。因此，這似乎是您在使用'track by $ index'時不斷看到最後一件事被刪除的原因。

請注意，我只是使用默認的跟蹤行爲，但因爲ng-repeat不允許在數組中使用重複項目，所以在您嘗試添加的場景已經存在的情況下，它將不起作用。如果您查看ng-repeat的API參考找到here，似乎有其他方法可以使用「跟蹤」的好例子。

希望這會有所幫助。