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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
js选项卡的制作方法
Jan 23 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
es6函数之箭头函数用法实例详解
Apr 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
php 多个submit提交表单 处理方法
2009/07/07 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
Array.prototype 的泛型应用分析
2010/04/30 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
javaScript封装的各种写法
2017/08/14 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
python实现简单购物商城
2016/05/21 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
PHP统计代码行数的小代码
2019/09/19 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
python3 logging日志封装实例
2020/04/08 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
中学生校园广播稿
2014/01/16 职场文书
火箭队口号
2014/06/18 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
企业安全生产检查制度
2015/08/06 职场文书
详解Python牛顿插值法
2021/05/11 Python