1. 程式人生 > >AngularJS中使用ng-repeat的index

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>