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操纵窗口的方法小结
Jun 28 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
浅谈flask源码之请求过程
2018/07/26 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
python内存管理机制原理详解
2019/08/12 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
实体的生命周期
2013/08/31 面试题
在校学生职业规划范文
2014/01/08 职场文书
开会迟到检讨书
2014/01/08 职场文书
腾讯广告词
2014/03/19 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
Python中zipfile压缩包模块的使用
2021/05/14 Python
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android