AngularJS中使用ng-repeat的index

1 篇文章 0 订阅
1 篇文章 0 订阅

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值