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

  1.  var app = angular
  2.  
  3.         .module("myModule", [])
  4.  
  5.         .controller("myController", function ($scope) {
  6.  
  7.             var employees = [
  8.  
  9.                 { name: "Ben", gender: "Male", city: "London", salary: 55000 },
  10.  
  11.                 { name: "Sara", gender: "Female", city: "Chennai", salary: 68000 },
  12.  
  13.                 { name: "Mark", gender: "Male", city: "Chicago", salary: 57000 },
  14.  
  15.                 { name: "Pam", gender: "Female", city: "London", salary: 53000 },
  16.  
  17.                 { name: "Todd", gender: "Male", city: "Chennai", salary: 60000 }
  18.  
  19.             ];
  20.  
  21.             $scope.employees = employees;
  22.  
  23.         });

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.

  1.  <!DOCTYPE html>
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.  
  7.     <title></title>
  8.  
  9.     <script src="Scripts/angular.min.js"></script>
  10.  
  11.     <script src="Scripts/Script.js"></script>
  12.  
  13.     <link href="Styles.css" rel="stylesheet" />
  14.  
  15. </head>
  16.  
  17. <body ng-app="myModule">
  18.  
  19.     <div ng-controller="myController">
  20.  
  21.         <input type="checkbox" ng-model="hideSalary" />Hide Salary
  22.  
  23.         <br /><br />
  24.  
  25.         <table>
  26.  
  27.             <thead>
  28.  
  29.                 <tr>
  30.  
  31.                     <th>Name</th>
  32.  
  33.                     <th>Gender</th>
  34.  
  35.                     <th>City</th>
  36.  
  37.                     <th ng-hide="hideSalary">Salary</th>
  38.  
  39.                 </tr>
  40.  
  41.             </thead>
  42.  
  43.             <tbody>
  44.  
  45.                 <tr ng-repeat="employee in employees">
  46.  
  47.                     <td> {{ employee.name }} </td>
  48.  
  49.                     <td> {{ employee.gender}} </td>
  50.  
  51.                     <td> {{ employee.city}} </td>
  52.  
  53.                     <td ng-hide="hideSalary"> {{ employee.salary  }} </td>
  54.  
  55.                 </tr>
  56.  
  57.             </tbody>
  58.  
  59.         </table>
  60.  
  61.     </div>
  62.  
  63. </body>
  64.  
  65. </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.

  1.  <!DOCTYPE html>
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.  
  7.     <title></title>
  8.  
  9.     <script src="Scripts/angular.min.js"></script>
  10.  
  11.     <script src="Scripts/Script.js"></script>
  12.  
  13.     <link href="Styles.css" rel="stylesheet" />
  14.  
  15. </head>
  16.  
  17. <body ng-app="myModule">
  18.  
  19.     <div ng-controller="myController">
  20.  
  21.         <input type="checkbox" ng-model="hideSalary" />Hide Salary
  22.  
  23.         <br /><br />
  24.  
  25.         <table>
  26.  
  27.             <thead>
  28.  
  29.                 <tr>
  30.  
  31.                     <th>Name</th>
  32.  
  33.                     <th>Gender</th>
  34.  
  35.                     <th>City</th>
  36.  
  37.                     <th ng-show="!hideSalary">Salary</th>
  38.  
  39.                 </tr>
  40.  
  41.             </thead>
  42.  
  43.             <tbody>
  44.  
  45.                 <tr ng-repeat="employee in employees">
  46.  
  47.                     <td> {{ employee.name }} </td>
  48.  
  49.                     <td> {{ employee.gender}} </td>
  50.  
  51.                     <td> {{ employee.city}} </td>
  52.  
  53.                     <td ng-show="!hideSalary"> {{ employee.salary  }} </td>
  54.  
  55.                 </tr>
  56.  
  57.             </tbody>
  58.  
  59.         </table>
  60.  
  61.     </div>
  62.  
  63. </body>
  64.  
  65. </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.

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <script src="Scripts/angular.min.js"></script>
  6.     <script src="Scripts/Script.js"></script>
  7.     <link href="Styles.css" rel="stylesheet" />
  8. </head>
  9. <body ng-app="myModule">
  10.     <div ng-controller="myController">
  11.         <input type="checkbox" ng-model="hideSalary" />Hide Salary
  12.         <br /><br />
  13.         <table>
  14.             <thead>
  15.                 <tr>
  16.                     <th>Name</th>
  17.                     <th>Gender</th>
  18.                     <th>City</th>
  19.                     <th ng-hide="hideSalary">Salary</th>
  20.                     <th ng-show="hideSalary">Salary</th>
  21.                 </tr>
  22.             </thead>
  23.             <tbody>
  24.                 <tr ng-repeat="employee in employees">
  25.                     <td> {{ employee.name }} </td>
  26.                     <td> {{ employee.gender}} </td>
  27.                     <td> {{ employee.city}} </td>
  28.                     <td ng-hide="hideSalary"> {{ employee.salary  }} </td>
  29.                     <td ng-show="hideSalary"> ##### </td>
  30.                 </tr>
  31.             </tbody>
  32.         </table>
  33.     </div>
  34. </body>
  35.  
  36. </html>

Part 14 ng hide and ng show in AngularJS的更多相关文章

  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. 重构改善既有代码设计--重构手法14：Hide Delegate （隐藏委托关系）

    客户通过一个委托类来调用另一个对象.在服务类上建立客户所需的所有函数,用以隐藏委托关系. 动机:封装即使不是对象的最关机特性,也是最关机特性之一.“封装”意味着每个对象都应该少了解系统的其他部分.如此 ...

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

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

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

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

  6. 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 ...

  7. 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 ...

  8. ng 构建

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

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

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

随机推荐

  1. 【java开发系列】— JDOM创建、改动、删除、读取XML文件

    有非常多中操作XML文件的方法,这里介绍一下JDOM的用法和技巧. JDOM下载地址 创建XML文档 XML文件是一种典型的树形文件,每一个文档元素都是一个document元素的子节点. 而每一个子元 ...

  2. 永久改动redhat的default route

    1,能够用route命令暂时改动: route add default gw <gateway ip> 2, 通过改动/etc/sysconfig/network 文件永久改动: 脚本: ...

  3. Asp.net使用jQuery实现数据绑定与分页

    使用jQuery来实现Gridview, Repeater等服务器端数据展示控件的数据绑定和分页.本文的关注重点是数据如何实现数据绑定. Content jQuery的强大和可用性使得其迅速的流行起来 ...

  4. C++ Interview - using new and delete to alloc and free memory

    1. dynamic create object and initialization int *pi = new int; // pi points to an uninitialized int ...

  5. Codeforces Gym 100231G Voracious Steve 记忆化搜索

    Voracious Steve 题目连接: http://codeforces.com/gym/100231/attachments Description 有两个人在玩一个游戏 有一个盆子里面有n个 ...

  6. 谷歌技术&quot;三宝&quot;之MapReduce

    江湖传说永流传:谷歌技术有"三宝",GFS.MapReduce和大表(BigTable)! 谷歌在03到06年间连续发表了三篇非常有影响力的文章,各自是03年SOSP的GFS,04 ...

  7. dsPIC33EP ADC模块初始化及应用实例

    //文件名 p33adc.h #ifndef _P33ADC_H_ #define _P33ADC_H_ //#include "p33adc.h" //--AD1CON1 #de ...

  8. #import与@class的区别

    转自:http://www.cnblogs.com/jqyp/archive/2012/01/13/2321707.html 1.import会包含这个类的所有信息,包括实体变量和方法,而@class ...

  9. 设备文件的创建mknod

    设备文件是通过mknod命令来创建的.其命令格式为: mknod [OPTION]... NAME TYPE [MAJOR MINOR] TYPE取值: 主设备号和次设备号两个参数合并成一个16位的无 ...

  10. 基于HTML5实现五彩连珠小游戏

    今天给大家分享一款基于HTML5实现五彩连珠小游戏.这款游戏的规则:点击彩球移动到期望的位置,每移动一次,画面将随机出现3个新的彩球:当同一颜色的彩球连成5个一行或一列或一斜线时,这5个彩球同时消失, ...