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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
ppk谈JavaScript style属性
Oct 10 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
总结javascript三元运算符知识点
Sep 28 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
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
django实现分页的方法
2015/05/26 Python
python监控文件或目录变化
2016/06/07 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
pandas数据处理进阶详解
2019/10/11 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
营销人才自我鉴定范文
2013/12/25 职场文书
毕业自我评价
2014/02/05 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
中学生思想品德评语
2014/12/31 职场文书
史上最牛的辞职信
2015/02/28 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
导游词之长城八达岭
2019/09/24 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript