ng-repeat 嵌套访问父作用域里的属性
在一个项目中,需要嵌套循环输出一个二维表的里的数据
数据结构
[
{
id:1,
list:[
{
id:1,
name:'li'
}
]
},
{
id:2,
list:[
{
id:1,
name:'ming'
}
]
}
]
模板页
<div ng-repeat="c in obj">
<div ng-repeat="a in c.list">
<span ng-if="$first">
{{$parent.$index}}
</span>
</div>
</div>
因为需要访问到父作用域里的索引值,可以通过$parent来获取对父作用域的引用
但是每次取到的值都是一样的,纠结了一会才想起来我添加了一个ng-if动态插入DOM节点。ng-if会动态的插入和删除DOM,那么就会创建一个新的作用域,$parent.$index实际山访问到的就是第二层ng-repeat的$index变量;
ng-if 和ng-repeat都是动态的添加或删除DOM(基于这点,就不需要记住所有的能创建作用域的指令;还有directive, ng-controller),所以会创建新的作用域,和指令一样;
所以像我前面的代码,要想访问到第一级ng-repeat里的$index,就需要在往上访问一级
{{$parent.$parent.$index}}
虽然可以访问的到,但是如果层级改变,我们就需要重新调整,增加或删除$parent,看起来好像很不友好。
ng-repeat 嵌套访问父作用域里的属性的更多相关文章
- iframe里访问父级里的方法属性
window.parent.attributeName; // 访问属性attributeName是在父级窗口的属性名 window.parent.Func(); // 访问属性Func()是在父 ...
- JsRender实用教程(tag else使用、循环嵌套访问父级数据)
前言 JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点: · 简单直观 · 功能强大 · 可扩展的 · 快如闪电 这些特性看起来很厉害,但几乎每个模版引擎, ...
- angularjs 嵌套控制器,子控制器访问父控制器
<pre> http://www.lovelucy.info/understanding-scopes-in-angularjs.html http://blog.csdn.net/jfk ...
- 在iframe里调用parent.func()引出的js函数运行在它们被定义的作用域里,而不是它们被执行的作用域里
有个document里定义了一个函数func(),同时在document里嵌入了一个iframe,在这个iframe里调用父窗口的方法:parent.func(),本来我以为这个函数的运行环境是在这个 ...
- html 事件处理程序中的代码在执行时,有权访问全局作用域中的任何代码。
看一个简单的例子: html: <head> <meta charset="UTF-8"> <title>Document</title& ...
- JavaScript从父页面获取子页面的值(子页面又如何访问父页面)
之前还真没做过类似的东西,,top页面获取子页面的document.. 在百度搜了下即找到这个东东,还好,能用. 主要就是使用 contentWindow方法,获取子页面的所有document,再做处 ...
- Handlebars.js循环中索引(@index)使用技巧(访问父级索引)
使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循 ...
- jsrender-for循环中访问父属性
jsrender中使用for循环数据时有时需要访问父级数据. 而jsrender在循环中的父级数据存放在隐藏属性parent.parent.data中,使用案例如下 {{:#parent.parent ...
- php学习笔记:foreach循环访问关联数组里的值
foreach循环可以将数组里的所有值都访问到,下面我们展示下,用foreach循环访问关联数组里的值. 例如: $fruit=array('apple'=>"苹果",'ba ...
随机推荐
- Fragment中onActivityResult不响应
开发中遇到Fragment中onActivityResult不响应的问题,曾经见过. 不少同学说处理方法是在与Fragment绑定的FragmentActivity中重写onActivityResul ...
- spring MVC入门教程
写一个spring mvc后台传值到前台的一个小例子. 分为以下几个步骤: 1.创建web项目. 导入项目包.具体有如下: spring-aop-4.0.4.RELEASE.jar spring-be ...
- java第二周周学习总结
java运算符和循环 java运算符 一.for 语句 for 语句的基本结构如下所示:for(初始化表达式;判断表达式;递增(递减)表达式){ 执行语句; //一段代码} 初始化表达式:初 ...
- BZOJ 1227: [SDOI2009]虔诚的墓主人
1227: [SDOI2009]虔诚的墓主人 Time Limit: 5 Sec Memory Limit: 259 MBSubmit: 1078 Solved: 510[Submit][Stat ...
- asp.net页面生命周期
Asp.Net页面生命周期 本文转载自:http://www.cnblogs.com/xhwy/archive/2012/05/20/2510178.html 一.什么是Asp.Net页面生命周期 当 ...
- Android源码——Logger日志系统
Android的Logger日志系统是基于内核中的Logger日志驱动程序实现的. 日志保存在内核空间中 缓冲区保存日志 分类方法:日志的类型 + 日志的输出量 日志类型: main ...
- PHP CLI编程基础知识积累(进程、子进程、线程)
.note-content { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeit ...
- SVN 提交报错:×××文件is not under version control
解决方法:1.删除出错的文件,然后在出错文件所在文件夹执行还原操作 2.VS中可将文件先排除在项目外,再包含在项目内,即可正常提交
- ng-class结合三目运算
ng-class文档:https://docs.angularjs.org/api/ng/directive/ngClass 但是在实际项目中可能会用到三目运算,实例如下: <ul> &l ...
- Linux学习之CentOS(二十)--CentOS6.4下修改MySQL编码方法
但是当我们在试图对数据库中的数据进行备份或者将sql文件导入到我们的数据库时可能就会碰到编码的问题,在windows下安装mysql时我们可以在安装的时候就选择好整个数据库的编码方式(通常设置成utf ...