javascript - angularjs:$index 在 ng-repeat 中如何工作？

Question

考虑下表:

 <tbody data-ng-repeat="job in jobs">
    <tr>
        <td>{{job.fileName}}</td>  
        <td>
            <button class="btn" ng-click="deleteJob($index);"><i class="icon-delete"></i>&nbsp; delete</button>
        </td>
    </tr>
</tbody>

如果我删除一个作业，行 ID 会传递给该函数并且它可以正常工作。

 scope.deleteJob = function (id) {
                scope.jobs.splice(id, 1);
            }

但是，如果我将 deleteJob($index) 更改为 deleteJob({{$index}}) 那么，索引仍会传递给函数，但是如果我删除第 1 行，第 2 行的索引保持为 2，并且不更新。

怎么会？这两种方法有什么区别？

Answer 1

这是因为当您使用 $index 时它是一个变量，但是当您使用 {{$index}} 时使用的值而不是变量。

如果您检查 DOM，您会发现在第一个 case($index) 中，您仍然会在 DOM 中看到 $index，但是当您使用 { {$index}} 你会在 DOM 中看到 0,1,2...。

如果您使用 {{index}}，当数组改变时，您的 DOM 仍然会有 deleteJob(0),deleteJob(2) ... 等等on - 缺少已删除的索引。

如果您使用 $index，您的 DOM 将具有 $index，这是一个代表实际当前索引的变量。