AngularJs ng-repeat 嵌套如何获取外层$index


Posted in Javascript onSeptember 21, 2016

一个真实项目的例子是遍历表格的行和列, 每一行需要显示当前是第几行, 我立刻想到用$index, 简直就如同砍瓜切菜般, 一切都那么行云流水, 简直太容易了, 于是有了下面这段代码.

<!-- repeat data row -->
<tr ng-repeat="row in rows track by row.id">
  <td ng-repeat="col in row.columns track by col.id">
    <span ng-if="col.id == 0" ng-bind="$index"></span>
  </td>
</tr>

可当我的程序跑起来了, 我发现我获取的$index感觉怪怪的, 我想一定是我打开的方式不对, 我狂按几下F5, 可事实就是我的程序出BUG了, 因为它拿到的是列循环的索引. 这下我懵逼了. 你TM是在逗我?

经过思索, 我想到了ngInit, 于是有了下面这段代码,
我尝试做的事情是把$index赋值给了outerIndex, 并在循环体中输出outerIndex.

<tr ng-repeat="row in rows track by row.id" ng-init="outerIndex = $index">
  <td ng-repeat="col in row.columns track by col.id">
    <span ng-if="col.id == 0" ng-bind="outerIndex "></span>
  </td>
</tr>

这时成功得到了想要的结果. 虽然这个小问题很简单, 但对于angular新手来说还是挺蛋疼的, 感觉答案呼之欲出, 却又欲言又止,
小小记录一下, 我的angularJs之路才刚刚开始.

以上就是对AngularJs ng-repeat 嵌套如何获取外层$index 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
D3.js实现饼状图的方法详解
Sep 21 #Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 #Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 #Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 #Javascript
D3.js实现折线图的方法详解
Sep 21 #Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 #Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 #Javascript
You might like
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python多线程扫描端口代码示例
2018/02/09 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
男女朋友协议书
2014/04/23 职场文书
学校教师安全责任书
2014/07/23 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
房屋租房协议书范本
2014/12/04 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript