在AngularJS中,可以使用ng-repeat指令进行嵌套循环。同时,可以使用$index变量获取当前循环的索引值。
下面是一个示例代码,展示了如何在AngularJS中使用嵌套循环和$index变量:
HTML代码:
外层循环 - {{item.name}}
-
内层循环 - {{subItem}},索引值:{{$index}}
JavaScript代码:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.items = [
{ name: '项1', subItems: ['子项1', '子项2', '子项3'] },
{ name: '项2', subItems: ['子项4', '子项5', '子项6'] },
{ name: '项3', subItems: ['子项7', '子项8', '子项9'] }
];
});
在上述示例中,外层循环使用ng-repeat指令遍历items数组,并显示每个item的name属性。内层循环使用ng-repeat指令遍历每个item的subItems数组,并显示每个subItem的值以及$index变量的值。
结果将会是:
外层循环 - 项1
内层循环 - 子项1,索引值:0
内层循环 - 子项2,索引值:1
内层循环 - 子项3,索引值:2
外层循环 - 项2
内层循环 - 子项4,索引值:0
内层循环 - 子项5,索引值:1
内层循环 - 子项6,索引值:2
外层循环 - 项3
内层循环 - 子项7,索引值:0
内层循环 - 子项8,索引值:1
内层循环 - 子项9,索引值:2
通过以上示例,可以看到ng-repeat指令是如何嵌套使用的,并且如何使用$index变量获取嵌套循环的索引值。