我要评论angularjs使用ng-repeat的index
angularjs中的ng-repeat中，隐含的index，可以使用$index来访问，也可以自己指定index对应的变量名。
使用隐含的index变量
隐含的index变量名是index，可以使用$index来访问。
// 定义module和controller
var site = angular.module('application.site', []);
site.controller('maincontroller', ['$scope', '$http', function ($scope, $http) {
$scope.users = [
{name:"xialei",posts:["post一","post二","post三"]},
{name:"zhangsan",posts:["post四","post五"]}
];
}]);下面在html页面内使用controller和定义的collection对象。
<div ng-controller="maincontroller">
<dl ng-repeat="user in users">
<dt ng-init="p_index=$index">name:{{ user.name }}</dt>
</dl>
</div>这里使用了$index，这是angularjs提供的隐含的collection对象的index变量量。
指定index变量名
在ng-repeat中可以自己指定index的变量名称，并在随后使用。
比如下面代码中，定义了times的index变量名称timeindex (为tr 元素), 为days的遍历操作，定义了dayindex的索引变量。
<tr data-ng-repeat="(timeindex, time) in times">
<td style="text-align: center; width: 12.5%;" data-ng-style="dogettimecolumnstyle($index)">{{time}}</td>
<td data-ng-repeat="(dayindex, day) in days"
data-ng-click="selectdatetimeslot(dayindex, day, timeindex, time)">
<button class="popupwindow"
data-ng-if="datetimeslots[dayindex][timeindex].status && datetimeslots[dayindex][timeindex].status != 'available' && datetimeslots[dayindex][timeindex].status != 'expired' &&
datetimeslots[dayindex][timeindex].mode != 'one_v_many'"
data-ng-class="datetimeslots[dayindex][timeindex].displaystatus | lowercase"
data-placement="{{dogettimecolumnpopoverplacement(dayindex, timeindex)}}" data-animation="am-flip-x"
data-trigger="focus" data-bs-popover
data-template="partials/timeslotpopover.html">
{{datetimeslots[dayindex][timeindex].displaystatus}} {{datetimeslots[dayindex][timeindex].stdname}}
</button>
ps：
$index是angular 内针对ng-repeat提供的隐含index变量名称，如果在ng-repeat嵌套使用时，index名称会发生冲突及覆盖。这是也应该使用自定义的变量名。
下面例子中父级的index使用ng-init，定义了p_index来指定为parent index。
<div ng-controller="maincontroller">
<dl ng-repeat="user in users">
<dt ng-init="p_index=$index">name:{{ user.name }}</dt>
<dd ng-repeat="p in user.posts">parent index:{{ p_index }} - {{ p }}
self index:{{ $index }}
</dd>
</dl>
</div>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论