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 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
在线编辑器中换行与内容自动提取
Apr 24 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 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 flv视频时间获取函数
2010/06/29 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
numpy.array 操作使用简单总结
2019/11/08 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
J2EE系统只能是基于web
2015/09/08 面试题
安全生产投入制度
2014/01/29 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
公司任命书模板
2014/06/06 职场文书
敬老月活动总结
2014/08/28 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
商场收银员岗位职责
2015/04/07 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS