在数据列表渲染的时候,我们可能不仅有一层数据,可能是三级甚至更多,如果我们要显示或者隐藏对应的数据,那么就需要给数据进行子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. elasticsearch 大量数据翻页到后面无数据解决

    默认情况下报错信息:from + size 不能大于10000 {"error":{"root_cause":[{"type":" ...

  2. linux替换yum源及配置本地源

    linux系统安装后自带的bash源由于在国外,安装软件包的时候会非常慢,最好替换一下yum源. ​关于yum源的简单介绍 ​           yum的主要功能是更方便地添加,删除和更新rpmba ...

  3. 判断浏览器环境(QQ,微信,安卓设备,IOS设备,PC微信环境,移动设备)

    判断浏览器环境(QQ,微信,安卓设备,IOS设备,PC微信环境,移动设备) // ===== 判断浏览器环境 ===== // // 判断是否是QQ环境 function isQQ() { retur ...

  4. CI框架 重定向redirect()

    CI框架不能使用$this->redirect(),只能使用redirect():并且默认重定向地址带有index.php,如果需要去掉,请使用绝对地址. 使用示例: 通过发送HTTP头,命令客 ...

  5. Spark架构与作业执行流程简介(scala版)

    在讲spark之前,不得不详细介绍一下RDD(Resilient Distributed Dataset),打开RDD的源码,一开始的介绍如此: 字面意思就是弹性分布式数据集,是spark中最基本的数 ...

  6. The Tower of Babylon UVA - 437 DAG上的动态规划

    题目:题目链接 思路:每个方块可以用任意多次,但因为底面限制,每个方块每个放置方式选一个就够了,以x y为底 z 为高,以x z为底 y 为高,以y z为底 x为高,因为数据量很小,完全可以把每一种当 ...

  7. 将SpringBoot默认Json解析框架jackson替换成fastjson

    步骤一:引入依赖<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson< ...

  8. 给B公司的一些建议(又一篇烂尾的文章)

    感慨:太多太多的悲伤故事,发生在自己身上,发生在自己的身边.因此,为了避免总是走"弯路",走"错误"的道路,最近一直在完善自己的理论模型. 烂尾说明:本文是一篇 ...

  9. Python虚拟机类机制之descriptor(三)

    从slot到descriptor 在Python虚拟机类机制之填充tp_dict(二)这一章的末尾,我们介绍了slot,slot包含了很多关于一个操作的信息,但是很可惜,在tp_dict中,与__ge ...

  10. windows下,cmd 运行 python 脚本,选中文字就停止运行了【已解决】

    参考资料: https://jingyan.baidu.com/article/ce09321bb95dda2bff858f26.html 问题原因: cmd 里面,快速编辑模式会暂停程序 解决步骤: ...