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 相关文章推荐
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
详解vue的diff算法原理
May 20 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 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 编程的 5个良好习惯
2009/02/20 PHP
php中的三元运算符使用说明
2011/07/03 PHP
PHP测试程序运行时间的类
2012/02/05 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
Vue的Class与Style绑定的方法
2017/09/01 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
Python中函数参数匹配模型详解
2019/06/09 Python
python三大神器之fabric使用教程
2019/06/10 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
上班离岗检讨书
2014/01/27 职场文书
校园安全检查制度
2014/02/03 职场文书
军人违纪检讨书
2014/02/04 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
校运会通讯稿
2015/07/18 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
python如何利用traceback获取详细的异常信息
2021/06/05 Python