javascript - AngularJs，在添加或删除范围数据时使用淡入淡出

Question

我有一个待办事项列表，带有 js:

function todoCtrl($scope) {

     $scope.todos = S('todos', []);

     $scope.addTodo = function() {

        $scope.todos.unshift({

            text: $scope.todoText,

            done: false

        });

        $scope.todoText = '';

      }

      $scope.remove = function($index) {

        $scope.todos.splice($index, 1);

       }
}

html 是:

<div id="scope" ng-controller="todoCtrl">
    <div id="todoAdd">
    <h3>Todo List</h3>
    <form ng-submit="addTodo()">
        <input class="input" ng-model="todoText"/>
    </form>
    </div>
    <div style="margin-top:120px;" id="todolist">
    <div style="width:320px;margin-left:42px;margin-top:40px;" ng-repeat="todo in todos track by $index">
        <input type="checkbox" class="checkbox" ng-model="todo.done" ng-change="todochange(todo)">
        <p class="todoP todo{{todo.done}}" ng-click="remove($index)">{{todo.text}}</p>
    </div>
    </div>
</div>

然后我添加 ng-animate css:

.ng-enter 
{
    -webkit-transition: 1s;
    opacity:0;
}
.ng-enter-active 
{
    opacity:1;
}


.ng-leave 
{
    -webkit-transition: 1s;
}
.ng-leave-active 
{
    opacity:0;
}

问题是当我添加或删除一个项目时，总是最后一个项目淡入或淡出，而不是我添加或单击的元素。为什么？请告诉我。

Answer 1

此问题的根本原因是 ngRepeat DOM 通过使用“track by”表达式与 $index 相关联。通过在 ng-repeat 指令中使用“track by”，只有在“track by expression”中定义的对象和 DOM 之间的关联不存在时，Angular 才会 $destroy/re-create DOM。

让我们探索“按 $index 跟踪”的工作原理，并弄清楚为什么当用户添加/删除待办事项时最后一项总是淡入/淡出。

案例:添加待办事项

我们假设 todo 数据是空的，重复的 DOM 是:

<div>{{todo.text}}</div>

第 1 步:用户添加了文本为“0”的待办事项

数据:

todos = [{text:"0",done:false}];

$index 与 DOM 的关联:

$index0 <=====> <div>0</div>  //new association

因为这个关联不存在，DOM“0”会淡入。

第 2 步:用户添加了带有文本“1”的待办事项

数据:

todos = [{text:"1",done:false},{text:"0",done:false}];

$index 与 DOM 的关联:

$index0 <====> <div>1</div>
$index1 <====> <div>0</div>  //new association

同样，新建association: $index1 <====> 0不存在，新建DOM，淡入。您会发现 fadeIn DOM 始终是 ngRepeat 列表的最后一项。

案例:移除待办事项

假设todo数据是

[{text:"3",done:false},{text:"2",done:false},{text:"1",done:false},{text:"0",done:false}]

第 1 步:用户删除 {text:"2",done:false} 对象

数据:

todos = [{text:"3",done:false},{text:"1",done:false},{text:"0",done:false}];

$index 与 DOM 的关联:

$index0 <=====> <div>3</div>
$index1 <=====> <div>1</div>
$index2 <=====> <div>0</div>
$index3 // removed association

$index3 和 DOM 之间的关联不存在，所以移除 DOM 和 todo item fadeOut。

因为 $index 是 DOM 的标识符，所以 ng-repeat 列表的最后一项将始终是创建/销毁的 DOM。如果您想从“track by”表达式中获益，请尝试使用:

ng-repeat="todo in todos track by $id(todo)"

这是一个jsFiddle DEMO