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,看起来好像很不友好。

时间: 2024-10-12 06:58:42

ng-repeat 嵌套访问父作用域里的属性的相关文章

JsRender实用教程(tag else使用、循环嵌套访问父级数据)

前言: 正在做angularJs的分页功能时,发现了JsRender这个插件,园子里的大神多,查到一个用JsRender实现的分页demo,地址是这个 http://www.cnblogs.com/sword-successful/p/4759027.html#3379766 查了一下相关的基本资料 下面是引自http://www.ziliao1.com/article/show/0c5ac83aeac0a1fc6af388817c52b6c0.html JsRender是一款基于jQuery的

子控制器内如何访问父控制器中的变量

<div ng-controller="OparentController as pCtrl"> <p>直接访问父控制器的值:{{user}}</p> <div ng-controller="OchildController as cCtrl"> <p>嵌套如何访问..父控制器的值:失败:<input ng-model="pUser"/>成功:<input ng-mod

在iframe里调用parent.func()引出的js函数运行在它们被定义的作用域里,而不是它们被执行的作用域里

有个document里定义了一个函数func(),同时在document里嵌入了一个iframe,在这个iframe里调用父窗口的方法:parent.func(),本来我以为这个函数的运行环境是在这个iframe自己里面,测试发现虽然是在iframe里面调用的这个函数,但是运行环境依然是在父窗口里. 所以也验证了JS权威指南中的:js函数运行在它们被定义的作用域里,而不是它们被执行的作用域里. 又比如 var a=1; function f1(){console.log(a);}; functi

less的结构嵌套和变量作用域

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title></title>     <style type="text/less">         /*         结构嵌套和变量作用域         样式的结构可以像html结构来一样嵌套,并对应其样式.  

angularJS:ng-repeat作用域及父作用域调用$parent

一.关于ng-repeat的作用域学习: 1.ng-repeat会在上一级作用域名中创建一个子 作用域. 2.此时如果需要在子作用域中调用父作用域的变量,则可以使用$parent.variableName来调用. 3.ng-repeat中调用和父作用域同名的变量,无$parent前缀则指的是调用的子作用域的变量,就像局部变量一样. 4.ng-repeat中的$index: element in elements  当前element在elements中的下标数.例如第一个element,则$in

Handlebars.js循环中索引(@index)使用技巧(访问父级索引)

使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循环索引很简单,只需在循环中使用{{@index}}即可. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <META http-equiv=Content-Type content="text/html; charset=utf-

angular自定义指令在指令里面调用父作用域里面的方法传参

使用自定义指令的时候在指令里面调用父作用域里面的方法,在指令里面 在父作用域里面的模板里面使用指令 在控制器里面

文字或是子div在父div里垂直居中

只有一行文字的话,直接用line-hight可以解决. 有多行文字或是想要子div在父div里垂直居中: 首先要理解vertical-align: middle只在table属性中才会垂直居中,应用到display:inline-block元素的话就是和隔壁元素居中对齐. 方法一: 在div里增加一个隐藏子元素,高度为100%和父div一样,这样再设置vertical-align: middle的话子div就会和父div一样高的子元素垂直居中对齐. <style> .box{ float: l

AngularJS中的父作用域与自作用域

对于$scope上的原生类型,如$scope.name=""; 自作用域获取变量时,会查找作用域本身,找不到就会查找父作用域 修改时,若本作用域不存在,就会在本作用域创建一个变量,而不会向上查找并修改父作用域的变量 对于$scope上的对象,如$scope.name={}; 自作用域获取变量时,会查找作用域本身,找不到就会查找父作用域 修改时,若本作用域不存在,会向上查找并修改父作用域的变量 1 <!DOCTYPE html> 2 <html > 3 <h