Question

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

使用下面的代码，用户可以构造一个项目数组，并使用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);
    }

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

Answer 1

这里的主要问题似乎是我通过$ index跟踪ng-repeat。虽然我不完全理解为什么，但删除它可以使ng-animate完美地工作，而无需实现jqLite解决方案。

删除前淡出列表中的项目

1 个答案: