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之通用简单的table选项卡实现(二)
May 09 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
简单实现js放大镜效果
Jul 24 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 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
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
详解vue 数据传递的方法
2018/04/19 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
《在家里》教后反思
2014/03/01 职场文书
运动会班级口号
2014/06/09 职场文书
西游记读书笔记
2015/06/25 职场文书
服务行业标语口号
2015/12/26 职场文书