AngularJS:$index如何在ng-repeat中工作

angularjs: how does $index work in ng-repeat ?

本文关键字：ng-repeat 工作 index AngularJS      更新时间：2023-09-26

请考虑下表：

 <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，并且不会更新。

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

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

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

如果你使用{{index}}，当数组被改变时，你的DOM仍然有deleteJob(0),deleteJob(2)...依此类推 - 缺少已删除的索引。

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

>我认为{{$index}}是错误的，必须$index重复元素的迭代器偏移量的有效用法。

$index是迭代器，删除后应分别更新其中一个项目。

当我们编写{{$index}}意味着 - 显示存储在迭代器中的当前值。

像其他语言一样，例如Java，如果我们在循环列表中运行（如ng-repeat），我们只能使用迭代器来删除Item以防止索引问题

演示小提琴

相关文章：