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 相关文章推荐
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
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
Zend公司全球首推PHP认证
2006/10/09 PHP
默默简单的写了一个模板引擎
2007/01/02 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
中国医药集团国药在线:国药网
2017/02/06 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
工厂厂长岗位职责
2013/11/08 职场文书
夜大毕业生自我评价分享
2013/11/10 职场文书
公司年底活动方案
2014/08/17 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
郭明义观后感
2015/06/08 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js