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 浏览器关闭事件
Jul 08 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
详解JavaScript中的this指向问题
Feb 05 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
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
js中键盘事件实例简析
2015/01/10 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
Python and、or以及and-or语法总结
2015/04/14 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
Python高级property属性用法实例分析
2019/11/19 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
Python os库常用操作代码汇总
2020/11/03 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
模范教师事迹材料
2014/02/10 职场文书
保密工作责任书
2014/04/16 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
培训通知书模板
2015/04/17 职场文书
js前端图片加载异常兜底方案
2022/06/21 Javascript