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 相关文章推荐
iframe 异步加载技术及性能分析
Jul 19 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
vue实现菜单切换功能
May 08 Javascript
Vue使用NProgress进度条的方法
Sep 21 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
来自phpguru得Php Cache类源码
2010/04/15 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
深入理解node.js http模块
2018/01/24 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
秘书专业自荐信范文
2013/12/26 职场文书
美容院经理岗位职责
2014/04/03 职场文书
600字作文之感受大自然
2019/11/27 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android
Python学习开发之图形用户界面详解
2021/08/23 Python