Part 14 ng hide and ng show in AngularJS
ng-hide and ng-show directives are used to control the visibility of the HTML elements. Let us understand this with an example
When Hide Salary checkbox is checked, the Salary column should be hidden.
When it is unchecked the Salary column should be unhidden
Script.js : The controller function builds the model
var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {
var employees = [
{ name: "Ben", gender: "Male", city: "London", salary: 55000 },
{ name: "Sara", gender: "Female", city: "Chennai", salary: 68000 },
{ name: "Mark", gender: "Male", city: "Chicago", salary: 57000 },
{ name: "Pam", gender: "Female", city: "London", salary: 53000 },
{ name: "Todd", gender: "Male", city: "Chennai", salary: 60000 }
];
$scope.employees = employees;
});
HtmlPage1.html : Notice ng-model directive on the checkbox is set to hideSalary. hideSalary variable is then used as the value for ng-hide directive on the th and td elements that displays Salary. When the page is first loaded, hideSalary variable will be undefined which evaluates to false, as a result Salary column will be visible. When the checkbox is checked, hideSalary variable will be attached to the $scope object and true value is stored in it. This value is then used by the ng-hide directive to hide the salary td and it's th element. When the checkbox is unchecked, false value is stored in the hideSalary variable, which is then used by the ng-hide directive to display the Salary column.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<input type="checkbox" ng-model="hideSalary" />Hide Salary
<br /><br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>City</th>
<th ng-hide="hideSalary">Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td> {{ employee.name }} </td>
<td> {{ employee.gender}} </td>
<td> {{ employee.city}} </td>
<td ng-hide="hideSalary"> {{ employee.salary }} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
With the above example we can also use ng-show directive instead of ng-hide directive. For this example to behave the same as before, we will have to negate the value of hideSalary variable using ! operator.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<input type="checkbox" ng-model="hideSalary" />Hide Salary
<br /><br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>City</th>
<th ng-show="!hideSalary">Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td> {{ employee.name }} </td>
<td> {{ employee.gender}} </td>
<td> {{ employee.city}} </td>
<td ng-show="!hideSalary"> {{ employee.salary }} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The following example masks and unmasks the Salary column values using ng-hide and ng-show directives, depending on the checked status of the Hide Salary checkbox.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<input type="checkbox" ng-model="hideSalary" />Hide Salary
<br /><br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>City</th>
<th ng-hide="hideSalary">Salary</th>
<th ng-show="hideSalary">Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td> {{ employee.name }} </td>
<td> {{ employee.gender}} </td>
<td> {{ employee.city}} </td>
<td ng-hide="hideSalary"> {{ employee.salary }} </td>
<td ng-show="hideSalary"> ##### </td>
</tr>
</tbody>
</table>
</div>
</body> </html>
Part 14 ng hide and ng show in AngularJS的更多相关文章
- Angular6之ng build | ng build --aot | ng build --prod 差异
由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...
- 在库中使用schematics——ng add与ng update
起步 创建一个angular库 ng new demo --create-application=false ng g library my-lib 可见如下目录结构 ├── node_modules ...
- 重构改善既有代码设计--重构手法14：Hide Delegate （隐藏委托关系）
客户通过一个委托类来调用另一个对象.在服务类上建立客户所需的所有函数,用以隐藏委托关系. 动机:封装即使不是对象的最关机特性,也是最关机特性之一.“封装”意味着每个对象都应该少了解系统的其他部分.如此 ...
- angular 2 - 001 ng cli的安装和使用
angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...
- Angular 中后台前端解决方案 - Ng Alain 介绍
背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
- 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 ...
- 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 ...
- ng 构建
1.ng 构建和部署 构建:编译和合并ng build 部署:复制dist里面的文件到服务器 2.多环境的支持 配置环境package.json "scripts": { &quo ...
- Flume NG高可用集群搭建详解
.Flume NG简述 Flume NG是一个分布式,高可用,可靠的系统,它能将不同的海量数据收集,移动并存储到一个数据存储系统中.轻量,配置简单,适用于各种日志收集,并支持 Failover和负载均 ...
随机推荐
- 线性回归(linear regression)之监督学习
假设有以下面积和房屋价格的数据集: 可以在坐标中画出数据的情况: 就是基于这样一个数据集,假定给出一个房屋的面积,如何预测出它的价格?很显然就是我们只需建立一个关于房屋面积的函数,输出就是房屋的价格. ...
- C++学习笔记之迭代器
模板是的算法独立于存储的数据类型,而迭代器使算法独立于使用的容器类型.理解迭代器是理解STL的关键. 迭代器应该具备的特征: (1)应该能够对迭代器进行解除引用的操作,以便能够访问它引用的值.即如果P ...
- hdu 4740 The Donkey of Gui Zhou bfs
The Donkey of Gui Zhou Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproble ...
- 支付宝api指南
tyle="margin:20px 0px 0px; line-height:26px; font-family:Arial"> 在这些服务中,服务类型大致可以分为以下几类: ...
- 在Swift中的ASCII到字符转换的问题
我们在C++里处理字符通常是这样的 char a = 'A' // A = 65 printf("'%c' = %d", a + 1, a + 1) // 'B' = 66 这在号 ...
- 一款基于jQuery饼状图比例分布数据报表
今天给大家带来一款基于jQuery饼状图比例分布数据报表.这款报表插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 实例源码--Android图片滚动切换效果
下载源码 技术要点: 1.图片滚动切换技术 2.详细的源码注释 ...... 详细介绍: 1.图片滚动切换技术 本套源码实现了类似于网站图片滚动推广效果,效果不错,很不错的参考源码 2.源码目录 运 ...
- arm linux kernel 从入口到start_kernel 的代码分析
参考资料: <ARM体系结构与编程> <嵌入式Linux应用开发完全手册> Linux_Memory_Address_Mapping http://www.chinaunix. ...
- 功能分解——Android下画分时图与k线图有感
最近工作极度繁忙,已经好久没有更新博客了,总感觉要是再不抽空总结总结点东西,分分钟就会被懒惰的状态给打到了.同时也希望同学们谨记,如果你已经决定要坚持某些正确的东西,比如背完某章单词,看一完本书抑或是 ...
- LeetCode10 Regular Expression Matching
题意: Implement regular expression matching with support for '.' and '*'. '.' Matches any single chara ...