AngularJs ng-repeat 嵌套如何获取外层$index

在AngularJS中，`ng-repeat`指令用于迭代一个数组或对象集合，并在DOM中重复生成元素。当`ng-repeat`嵌套使用时，即在一个`ng-repeat`内部再使用另一个`ng-repeat`，我们可能会遇到需要访问外层循环变量的需求，比如外层循环的索引`$index`。在描述的问题中，开发者遇到的情况就是在遍历表格的行和列时，想要在列循环中获取到当前行的索引。 初始尝试中，直接在列循环中使用`$index`，实际上获取到的是列的索引，而不是行的索引。`$index`在内层`ng-repeat`中代表的是当前循环项的索引，而并不是外层循环的索引。所以，当开发者试图通过`$index`获取行号时，得到的却是列的编号，这显然不是预期的结果。 为了解决这个问题，开发者采用了`ngInit`指令。`ngInit`允许我们在指令执行前初始化表达式，因此可以在外层`ng-repeat`中使用`ngInit`将外层循环的`$index`赋值给一个新的变量，比如`outerIndex`。这样，在内层循环中，通过`outerIndex`就可以访问到外层循环的索引了。修改后的代码如下： ```html <tr ng-repeat="row in rows track by row.id" ng-init="outerIndex = $index"> <td ng-repeat="col in row.columns track by col.id"> <span ng-if="col.id == 0" ng-bind="outerIndex"></span> </td> </tr> ``` 通过这种方式，当列循环中的条件满足时（例如`col.id == 0`），就会显示外层循环（行）的索引`outerIndex`，从而达到了预期的效果。 这个例子展示了在AngularJS中处理嵌套循环时需要注意的问题。对于初学者，理解`$index`的作用域以及如何在不同层级的`ng-repeat`间传递信息是很重要的。通常，如果需要在内层循环中访问外层循环的数据，可以创建一个新的局部变量并通过`ngInit`进行初始化。此外，还可以使用`$parent`作用域来访问父级的属性，或者使用`$scope.$parent`来直接访问更上一层的`$scope`。 `ng-repeat`是AngularJS中非常强大的一个特性，它提供了便利的数据绑定和列表渲染功能。然而，在处理复杂数据结构和嵌套循环时，需要对`ng-repeat`的工作原理有深入的理解，以便正确地操作和传递数据。在这个过程中，不断实践和学习是提升AngularJS技能的关键。