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 的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • AngularJS ng-repeat数组有重复值的解决方法

    AngularJS ng-repeat数组有重复值的解决方法

    前言 大家都知道默认在ng-repeat的时候每一个item都要保证是唯一的,否则console就会打出error告诉你哪个key/value是重复的. 如: $scope.items = [ 'red', 'blue', 'yellow', 'white', 'blue' ]; 这个数组blue就重复了,html这么遍历它 <li ng-repeat="item in items">{{ item }}</li> 控制台就会抛出一个错误: 点击错误链接到Ang

  • Angularjs中ng-repeat的简单实例

    Angularjs中ng-repeat的简单实例 第一个例子:使用ng-repeat最简单的例子 <html ng-app="myApp"> <head> <title>angularjs-demo</title> <script type="text/javascript" src="angular.min.js" charset="utf-8"></scri

  • Angularjs的ng-repeat中去除重复数据的方法

    本文实例讲述了Angularjs的ng-repeat中去除重复数据的方法.分享给大家供大家参考,具体如下: 一.JS: ngApp.filter('unique', function () { return function (collection, keyname) { var output = [], keys = []; angular.forEach(collection, function (item) { var key = item[keyname]; if (keys.index

  • AngularJS实践之使用ng-repeat中$index的注意点

    发现问题 最近有客户投诉,说在删除指定的某条记录时,结果删掉的却是另外一条记录!看起来是个很严重的BUG. 有一次我们在工作中碰到了这个问题. 要定位这个BUG非常麻烦, 因为客户也不清楚如何重现这个问题. 后来发现这个Bug是由于在 ng-repeat 中使用了 $index 引发的. 一个简单动作(action)的列表 先来看看一个完整有效的ng-repeat示例. <ul ng-controller="ListCtrl"> <li ng-repeat="

  • AngularJS使用ng-repeat指令实现下拉框

    AngularJS使用ng-repeat指令实现下拉框

    AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素,但是使用不当也会有性能问题.下面给大家分享在项目中使用ng-repeat指令实现下拉框. 1.问题背景 select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之

  • angularjs在ng-repeat中使用ng-model遇到的问题

    在ng-repeat中使用ng-model时会有许多问题,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变.上面的问题我在开发时也遇到过,但是解决后我却怎么也还原不了那种情况了,只能先简单介绍一下无法获取的情景该如何解决. 例如: html: <body> <div ng-controller="selectController"> <div ng-repeat="pop in citylist"

  • AngularJS入门（用ng-repeat指令实现循环输出

    循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任.有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串,太不直观,有人搞出了js模板,也没好到哪里去. 用AngularJS就爽多了,语法和JSP类似: <!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title&g

  • AngularJS 获取ng-repeat动态生成的ng-model值实例详解

    AngularJS 获取ng-repeat动态生成的ng-model值实例详解

    AngularJS 获取ng-repeat动态生成的ng-model值               最近做项目遇到了ng-model是ng-repeat动态生成的,ng-model="变量",什么变量,是未知的,所以你无法在$scope."变量"取到值,就算取到值也是其中一个值,这样的问题,经过百度一番查找找到解决方案,这里记录下,也行可以帮助到大家. 代码 html <div> <div class="modal-header"

  • 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"> <

  • AngularJS 实现点击按钮获取验证码功能实例代码

    html :样式采用了sui框架的样式,请自行引入查看,AngularJS,自己引入, <div ng-controller="forGetPassword" ng-app="routingDemoApp"> <form novalidate name="forget"> <header class="bar bar-nav"> <a href="javascript:his

  • 详解在AngularJS的controller外部直接获取$scope

    以前利用webqq的写过一个自动发消息的脚本,由于那时webqq还直接使用类似jQuery操作DOM的技术,所以脚本很简单就可以实现. 现如今很多web应用都开始使用AngularJS,MVVM导致的就是无法操作dom而去直接改变数据.所以面对网页版微信,要实现一个自动发送的脚本,就无法再用以前那套DOM的思路了. 要修改AngularJS中的数据,首先就要获取scope.其实获取scope的方法很简单. 由于大部分Angular项目需要使用jQuery作为补充.可以在jQuery中通过.sco

  • AngularJS实现在ng-Options加上index的解决方法

    本文实例讲述了AngularJS实现在ng-Options加上index的解决方法.分享给大家供大家参考,具体如下: Angularjs交流群中有位童学问道如何为Angular select的ng-Options像Angularjs的ng-Repeat一样加上一个索引$index. 其实对于这个问题来说Angular本身并未提供$index之类的变量供使用.但是也不是说对于这个问题我们就没有解决方案. 把这个问题换成角度来看,我们所需要的就是js数组的下标,所以我们如果我们能够在对象上加入下标,

  • Java8中用foreach循环获取对象的index下标详解

    前言 在Java8中,我们经常使用lambada表达式进行foreach循环,但是常常我们在遍历List的时候想获取对象的index,但是Java8.9.10.11都没有相关的支持,同样的问题也存在于增强型for循环中,很多时候不得不含着泪以 for (int i = 0; i < list.size(); i++) 的方式写代码 我们的期望 list.foreach((item,index)->{}) //编译不通过 常见的list获取index方法 for(int i=0;i<lis

  • AngularJs Understanding Angular Templates

    angular template是一个声明规范,与model.controller的信息一起,渲染成用户在浏览器中所看到的视图.它是静态的DOM,包括HTML.CSS.angular特别的元素和angular指定的元素属性.angular元素和属性指示angular去扩展行为以及将template DOM转换为动态视图的DOM. 下面是我们可以在template中使用的angular元素已经元素属性的类型: Directive(http://www.jb51.net/article/91739.

  • 微信小程序实现跟随菜单效果和循环嵌套加载数据

    微信小程序实现跟随菜单效果和循环嵌套加载数据

    本文实例为大家分享了微信小程序实现跟随菜单效果.微信小程序循环嵌套加载数据,供大家参考,具体内容如下 效果如图: 代码如下: wxml //使用循环嵌套data数据格式写对即可 <scroll-view class="left" scroll-y> <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}&

  • AngularJs  Understanding Angular Templates

    angular template是一个声明规范,与model.controller的信息一起,渲染成用户在浏览器中所看到的视图.它是静态的DOM,包括HTML.CSS.angular特别的元素和angular指定的元素属性.angular元素和属性指示angular去扩展行为以及将template DOM转换为动态视图的DOM. 下面是我们可以在template中使用的angular元素已经元素属性的类型: Directive(https://www.jb51.net/article/91739

  • 基于angularjs实现图片放大镜效果

    基于angularjs实现图片放大镜效果

    前言 一开始打算用原生的angularjs写,但是发现用原生angularjs,无论如何都不能获取里面图片的宽度和高度,因为angularjs内置的jquery方法里没有winth()  .height()方法. 最好我还是引入了jquery,在同一scope上绑定了宽度高度.下面上源码,顺便我会把里面的一些注意的点说一下. 效果图 首先说明下 1.首先使用了两个同级指令,并在两个同级指令间进行通信,同级指令间通信,非常简单,就是不要让同级的指令生成独立的scope,并且在同一个作用域下就完成了

  • AngularJS表格添加序号的方法

    AngularJS表格添加序号的方法

    本文实例讲述了AngularJS表格添加序号的方法.分享给大家供大家参考,具体如下: 1.问题背景 AngularJS表格需要序号,可以利用$index来作为序号 2.实现实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之表格序号</title> <link rel="stylesheet" h

随机推荐