在数据列表渲染的时候,我们可能不仅有一层数据,可能是三级甚至更多,如果我们要显示或者隐藏对应的数据,那么就需要给数据进行子scope的绑定。如下

html

<div ng-app="demoApp">
<table ng-controller="mainCtrl">
<tr ng-repeat="app in apps" ng-model="app" ng-hide="app.hidden">
<td>
{{app.text}}
</td>
<td>
<button ng-click="underCarriage($index)">hide</button>
</td>
</tr>
</table>
</div>

javascript

app=angular.module('demoApp',[]);

app.controller('mainCtrl',function($scope){

    $scope.apps=[{text:"app1",hidden:false},
{text:"app2",hidden:false},
{text:"app3",hidden:false}]; $scope.underCarriage=function(id){
$scope.apps[id].hidden=true;
};
});

多级应当按照此方式同步进行。

另,ng-show和ng-hide无需自己设置display属性,如果自己设置了,将失去作用,小坑一个,坑的我不行。。。

ng-show和ng-hide的进阶应用的更多相关文章

  1. Angular6之ng build | ng build --aot | ng build --prod 差异

    由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...

  2. 在库中使用schematics——ng add与ng update

    起步 创建一个angular库 ng new demo --create-application=false ng g library my-lib 可见如下目录结构 ├── node_modules ...

  3. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

  4. Angular 中后台前端解决方案 - Ng Alain 介绍

    背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...

  5. How to Pronounce the Letters NG – No Hard G

    How to Pronounce the Letters NG – No Hard G Share Tweet Share Most of the time when you see the lett ...

  6. angular2 ng build --prod 报错:Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

    调试页面 ng serve 正常 ng build 也正常 ng build --prod 异常:Module not found: Error: Can't resolve './$$_gendir ...

  7. ng 构建

    1.ng 构建和部署 构建:编译和合并ng build 部署:复制dist里面的文件到服务器 2.多环境的支持 配置环境package.json "scripts": { &quo ...

  8. Flume NG高可用集群搭建详解

    .Flume NG简述 Flume NG是一个分布式,高可用,可靠的系统,它能将不同的海量数据收集,移动并存储到一个数据存储系统中.轻量,配置简单,适用于各种日志收集,并支持 Failover和负载均 ...

  9. FLUME NG的基本架构

    Flume简介 Flume 是一个cloudera提供的 高可用高可靠,分布式的海量日志收集聚合传输系统.原名是 Flume OG (original generation),但随着 FLume 功能 ...

  10. [转载]angularjs学习总结 详细教程

    http://blog.csdn.net/yy374864125/article/details/41349417#t75 目录(?)[-] 前言 AngularJS概述 AngularJS是什么 A ...

随机推荐

  1. c#:无限极树形结构

    最近一直在研究树形结构菜单,无意中让我弄了出来.先上代码: 首先需要这个的一个类 public class Tree { public int id { get; set; } public stri ...

  2. Python基础学习总结__Day1

    一.Python是一门什么类型语言 1.解释型:一边编译一边执行,劣势是运行速度慢,但通过运用PyPy交互解释器(JIT技术)会让python程序执行速度快很多.优势是可移植性强. 2.强类型:即类型 ...

  3. Vue之简易的留言板功能

    今天我将带大家通过Vue的todolist案例来完成一个简易的网页留言板! LES'T GO! 首先我们需要在页面上搭建一个input文本输入框,并设置提交按钮,通过循环指令来完成输入框的信息提交! ...

  4. Python9-IO模型-day41

    # 进程:启动多个进程,进程之间是由操作系统负责调用# 线程:启动多个线程,真正由被cpu执行的最小单位实际是线程# 开启一个线程,创建一个线程,寄存器.堆栈# 关闭一个线程# 协程# 本质上是一个线 ...

  5. 安装ANSYS19.0的正确方法(附下载)

    安装ANSYS19.0的正确方法 卸载干净旧版本ANSYS 安装或重新安装之前必须先卸载干净,安装过旧版本ANSYS的也要确保卸载干净.电脑环境准备参考以下内容 ANSYS 卸载后重装需要注意的问题_ ...

  6. Android百度地图开发 百度地图得到当前位置

    1.申请key 2.复制jar,以及.so .注意要Libs目录右键build path -> use as source folder(这是一个坑) 3. AndroidMainFast.xm ...

  7. 【Combination Sum 】cpp

    题目: Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C  ...

  8. C语言编程题002

    给出两个整数,L和R,其中L<=A<=B<=R,然后求出A^B值最大的数.其中1<=L<=R<=1000. 比如说L = 1;R = 3; L 0001 R 001 ...

  9. [python][oldboy][函数篇][1]名称空间

    名称空间:存储名字的空间,分为三种,内置空间,全局空间,局部空间 名称可以是:变量名,函数名,类名等 当遇到一个名字时,首先在自己空间找,再到自己外的空间找 比如 test.py print f # ...

  10. server.xml属性概念

    # system Processers为系统可用的线程数,一般和CPU核心线程数相同 BufferPool 是由BufferChunk组成. BufferPool的总大小为BufferChunkSiz ...