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 相关文章推荐
javascript 常用代码技巧大收集
Feb 25 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
vue实现百度搜索功能
Dec 28 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
Javascript类型判断相关例题及解析
Aug 26 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
简约JS日历控件 实例代码
2013/07/12 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
浅析Ajax语法
2016/12/05 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
Python实现自动发送邮件功能
2021/03/02 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
Linux下python制作名片示例
2018/07/20 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python实现AES加密和解密
2019/03/27 Python
python中的colorlog库使用详解
2019/07/05 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
C语言基础笔试题
2013/04/27 面试题
个人近期表现材料
2014/02/11 职场文书
统计系教授推荐信
2014/02/28 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
护士岗位竞聘书
2015/09/15 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
何时使用Map来代替普通的JS对象
2021/04/29 Javascript