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 相关文章推荐
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
JS检测图片大小的实例
Aug 21 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
js实现日历的简单算法
Jan 24 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
Vue中key的作用示例代码详解
Jun 10 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获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
phplot生成图片类用法详解
2015/01/06 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
Python 流程控制实例代码
2009/09/25 Python
python读文件逐行处理的示例代码分享
2013/12/27 Python
django实现用户登陆功能详解
2017/12/11 Python
python语言元素知识点详解
2019/05/15 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
服务行业个人求职的自我评价
2013/12/12 职场文书
学校联谊活动方案
2014/02/15 职场文书
英文求职信写作小建议
2014/02/16 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
政协调研汇报材料
2014/08/15 职场文书
护理见习报告范文
2014/11/03 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android
Go语言怎么使用变长参数函数
2022/07/15 Golang