脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJs ng-repeat &index

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

 更新时间：2016年09月21日 10:04:28   作者：菲汐  
这篇文章主要介绍了AngularJs ng-repeat 嵌套如何获取外层$index的相关资料,需要的朋友可以参考下

一个真实项目的例子是遍历表格的行和列, 每一行需要显示当前是第几行, 我立刻想到用$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 的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

您可能感兴趣的文章:

相关文章

  • 详解angular中通过$location获取路径(参数)的写法

    详解angular中通过$location获取路径(参数)的写法

    本篇文章主要介绍了详解angular中通过$location获取路径(参数)的写法 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • angular2中router路由跳转navigate的使用与刷新页面问题详解

    angular2中router路由跳转navigate的使用与刷新页面问题详解

    这篇文章主要给大家介绍了angular2中router路由跳转navigate的使用与刷新页面问题的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-05-05
  • Angular 利用路由跳转到指定页面的指定位置方法

    Angular 利用路由跳转到指定页面的指定位置方法

    今天小编就为大家分享一篇Angular 利用路由跳转到指定页面的指定位置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 基于angular2 的 http服务封装的实例代码

    基于angular2 的 http服务封装的实例代码

    这篇文章主要介绍了基于angular2 的 http服务封装实例代码，
    2017-06-06
  • angular实现IM聊天图片发送实例

    angular实现IM聊天图片发送实例

    本篇文章主要介绍了angular实现IM聊天图片发送实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 浅谈Angularjs link和compile的使用区别

    浅谈Angularjs link和compile的使用区别

    下面小编就为大家带来一篇浅谈Angularjs link和compile的使用区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 详解Angular之路由基础

    详解Angular之路由基础

    单页应用中，组件时构建应用的基础元素，页面展示什么内容均是靠页面有什么组件决定的，而展示什么组件又是由一组路由（带有Url元素的特定集合，可用于导航视图）决定的，希望本文可以帮助读者了解路由的基础概念和基础使用、写法。
    2021-05-05
  • angularjs表格分页功能详解

    angularjs表格分页功能详解

    本文给大家分享的是个人在项目中使用angularjs实现表格分页功能的思路和代码，非常的简单实用，有需要的小伙伴可以参考下。
    2016-01-01
  • Angular 4.X开发实践中的踩坑小结

    Angular 4.X开发实践中的踩坑小结

    这篇文章主要给大家介绍了关于Angular 4.X开发实践中的一些踩坑经验，文中主要介绍的是使用ngIf或者ngSwitch出错以及多级依赖注入器的相关内容，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-07-07
  • AngularJS实现表单验证

    AngularJS实现表单验证

    客户端表单验证是AngularJS里面最酷的功能之一。 AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。在AngularJS中，有许多表单验证指令。在这里，我们将谈谈几个最流行指令，然后我们将讨论如何编写自定义的验证。
    2015-01-01

最新评论