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 相关文章推荐
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
vue.js实现简单的计算器功能
Feb 22 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
转换中文日期的PHP程序
2006/10/09 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
简单的通用表达式求10乘阶示例
2014/03/03 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
python提取xml里面的链接源码详解
2019/10/15 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
Python 中Operator模块的使用
2021/01/30 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
商务助理岗位职责
2013/11/13 职场文书
毕业实习个人鉴定范文
2013/12/10 职场文书
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
任命书格式范文
2015/09/22 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL