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-popoverdata-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>

AngularJS中使用ng-repeat的index相关推荐

在AngularJS中读取查询参数的最简洁方法是什么？
本文翻译自:What's the most concise way to read query parameters in AngularJS? I'd like to read the values ...
如何在AngularJS中使用ng-repeat迭代键和值？
本文翻译自:How to iterate over the keys and values with ng-repeat in AngularJS? In my controller, I have ...
春风十里不如你--Angularjs 中的iframe 标签 ng-src 路径
Angularjs 中的iframe 标签 ng-src 路径报错问题解决办法 iframe中的src直接替换成ng-src不可以,需要转换一下.Angular里面有个属性是专门用来解决跨域问题的 ...
AngularJs中的directives（指令part1）
一.指令的职责指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...
转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
如果我有jQuery背景，那么“ AngularJS中的思考”吗？ [关闭]
已关闭 . 这个问题需要更加集中 . 它当前不接受答案. 想改善这个问题吗? 更新问题,使其仅通过编辑此帖子来关注一个问题. 4年前关闭. 已锁定 . 该问题及其答案被锁定,因为该问题是题外话,但具有 ...
AngularJS中实现无限级联动菜单（使用demo）
原文地址:http://www.cnblogs.com/front-end-ralph/p/5133122.html 昨天没来得及贴几个使用demo,今天补上,供有兴趣的同学参考 :) 1. 同步加载 ...
理解AngularJS中的依赖注入
作者 CraftsCoder 冷月无声 - 博客频道 - CSDN.NET http://blog.csdn.net/jaytalent/article/details/50986402 本文结合一些 ...
AngularJS中Directive指令系列 - 基本用法
参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...

AngularJS中使用ng-repeat的index

AngularJS中使用ng-repeat的index相关推荐

最新文章

热门文章