• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJs ng-repeat 嵌套如何获取外层$index

AngularJs ng-repeat 嵌套如何获取外层$index

作者:菲汐 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angularjs index,angularjs嵌套页面,angularjs嵌套路由,angularjs,angularjs菜鸟教程等相关知识,菲汐 希望在学习及工作中可以帮助到您

一个真实项目的例子是遍历表格的行和列, 每一行需要显示当前是第几行, 我立刻想到用$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>
</div>

可当我的程序跑起来了, 我发现我获取的$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>
</div>

这时成功得到了想要的结果. 虽然这个小问题很简单, 但对于angular新手来说还是挺蛋疼的, 感觉答案呼之欲出, 却又欲言又止,
小小记录一下, 我的angularJs之路才刚刚开始.

以上就是对AngularJs ng-repeat 嵌套如何获取外层$index 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

</div>

您可能想查找下面的文章:

  • AngularJS实践之使用ng-repeat中$index的注意点
  • AngularJS实现在ng-Options加上index的解决方法
  • AngularJs ng-repeat 嵌套如何获取外层$index

相关文章

  • 2017-05-30AngularJS表单验证中级篇(3)
  • 2017-05-30AngularJS封装$http.post()实例详解
  • 2017-05-30AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
  • 2017-05-30AngularJS API之copy深拷贝详解及实例
  • 2017-05-30AngularJS入门教程之Hello World!
  • 2017-05-30Angular.js指令学习中一些重要属性的用法教程
  • 2017-05-30详解AngularJS的通信机制
  • 2017-05-30AngularJS基础 ng-disabled 指令详解及简单示例
  • 2017-05-30如何解决手机浏览器页面点击不跳转浏览器双击放大网页
  • 2017-05-30基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • AngularJS实现动态编译添加到dom中的方法
    • AngularJS ng-bind 指令简单实现
    • 详解AngularJS中$filter过滤器使用(自定义过滤器)
    • angular+bootstrap的双向数据绑定实例
    • angularjs学习笔记之双向数据绑定
    • 基于angularjs实现图片放大镜效果
    • AngularJS 使用$sce控制代码安全检查
    • AngularJS使用ng-app自动加载bootstrap框架问题分析
    • Angular.js与Bootstrap相结合实现表格分页代码
    • AngularJS中如何使用$http对MongoLab数据表进行增删改查

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有