0

我目前正在尝试创建一个动画，其中列表项在从数组中删除之前消失。

使用下面的代码，用户可以构造一个项目数组，并使用 ng-repeat 显示该数组。他们可以通过单击调用控制器的指令来删除项目。

<div id="vocabId" class="vocab-list-construct">
    <div draggable-item track-array class="vocab-item" ng-repeat="obj in vocab.vocabConstruct track by $index"
         id={{obj.id}}>
        <div draggable='true' class="vocab-panel">
            <delete-vocab-item remove="vocab.vocabDeconstruct(obj.id)"></delete-vocab-item>
            <hr/>
            <span ng-click="vocab.vocabItem(obj.name)" 
                  class="vocab-name text-link">{{obj.name}}</span>
            &nbsp;&nbsp;{{obj.definition}}
                <br/><br/>
            </div>
        </div>
    </div>

这是指令...

(function(){
'use strict';

//directive for delete vocab button and animation
angular.module('ganeshaApp')
.directive('deleteVocabItem', function($timeout){
    return{
        restrict: 'E',
        link: function(scope, element, attrs){
            element.bind("click", function(){
                //some type of fade before the remove event fires 
                scope.$apply(attrs.remove)
            })
        },
        template: '<span class="glyphicon glyphicon-remove-circle pull-right"></span>'
    }
})
})();

还有控制器...

    vocab.vocabDeconstruct = function(id){
        var index;
        angular.forEach(vocab.vocabConstruct, function(value, key){
            if (value.id === id){
                index = vocab.vocabConstruct.indexOf(value)
            }
        })
        vocab.vocabConstruct.splice(index, 1);
    }

现在列表中的下一个项目正在立即替换已删除的项目和已删除的项目，并且已删除的项目在消失之前下降到列表的底部。看起来很邋遢。任何帮助将不胜感激！

4

1 回答 1

1

It seems like the main problem here was that I was tracking the ng-repeat by $index. Though I don't completely understand why, removing this allows the ng-animate to work perfectly without any need of implementing a jqLite solution.

于 2016-01-04T10:31:24.383 回答