ngHide and ngShow directive in AngularJS

As name itself suggests that these directives are used to display or hide different HTML elements.
Let us take an example to understand the ng-hide directive. In this example a list of predefined employees is displayed with column Name, Gender, Address and AccountNo. There is one checkbox that is used to hide account number column. Initially, when you execute the application, the checkbox is unchecked and account number column is displayed but when you checked the checkbox, the account number column will dissapear. Let us see the example.

Please refer the given hierarchy of files and folders.

demo

Example:Understanding the ng-hide directive

File Name: Script.js in Scripts folder.

/// <reference path="angular.min.js" />

var myApp = angular.module("myModule", []);
var myController = function ($scope)
{
     var Employee = [
          {
               Name: "Raj", Gender: "Male", Address: "Pune", AccountNo:2356574            
          },
          {
               Name: "Shiva", Gender: "Male", Address: "Pune", AccountNo: 2746579           
          },
          {
               Name: "Mili",  Gender: "Female", Address: "US", AccountNo: 9234650            
          },
          {
               Name: "Divya",  Gender: "Female", Address: "Nagpur", AccountNo: 9234697           
          },
          {
               Name: "Digvijay",  Gender: "Male", Address: "Pune", AccountNo: 1234607           
          }
     ];
     $scope.Emp = Employee;    
};
myApp.controller("myCont", myController);


Code for Demo.html

<!DOCTYPE html>
<html ng-app="myModule">
     <head>
          <script src="Scripts/angular.min.js" type="text/javascript"></script>
          <script src="Scripts/Script.js"></script>
          <style>
               table, th, td
               {
                    border: 1px solid grey;
                    border-collapse: collapse;
                    padding: 5px;
               }
               table tr:nth-child(odd)
               {
                    background-color: #ffe6e6;
               }
               table tr:nth-child(even)
               {
                    background-color: #ccffcc;
               }
          </style>
     </head>
     <body style="font-family:Arial; font-size:medium; color:darkblue">
          <div ng-controller="myCont">
               <h3>ngHide and ngShow directive in AngularJS.</h3>
               <br/>
               <input type="checkbox" ng-model="hideAccountNo"/>Hide Account Number
               <br/>
               <br/>
               <table>
                    <tr>
                         <th>EmpName</th>
                         <th>Gender</th>
                         <th>Address</th>
                         <th ng-hide="hideAccountNo">AccountNo</th>
                    </tr>
                    <tr ng-repeat="e in Emp">
                         <td>{{e.Name}}</td>
                         <td>{{e.Gender}}</td>
                         <td>{{e.Address}}</td>
                         <td ng-hide="hideAccountNo">{{e.AccountNo}}</td>
                    </tr>
               </table>
          </div>
     </body>
</html>


Execute the application and you will see the output as given below. Initially the value of hideAccountNo variable in ng-model="hideAccountNo" is false, that’s why you see the AccountNo column in employees list.

ng-hide="hideAccountNo" is used in <td> element of employee accountNo. When you check the checkbox, the value of hideAccountNo is true and AccountNo column will not be visible.

You can achieve the same functionality by using ng-show directive as follows:
Use ng-show=" !hideAccountNo" in <td> element of employee accountNo.
It is important to note that, ! sign is used in ng-show directive.

Output:
nghide ngshow directive

When you check the checkbox, the AccountNo column will not be visible.

hide check box

Suppose, you want the AccountNo column to be seen but not the data when you check the checkbox. In this situation you can mask/unmask the particular column.
In the above given example just change the code as follows:

Example: Edit the code to hide the data in accountNo

<table>
     <tr>
          <th>EmpName</th>
          <th>Gender</th>
          <th>Address</th>
          <th ng-hide="hideAccountNo">AccountNo</th>
          <th ng-show="hideAccountNo">AccountNo</th>
     </tr>
     <tr ng-repeat="e in Emp">
          <td>{{e.Name}}</td>
          <td>{{e.Gender}}</td>
          <td>{{e.Address}}</td>
          <td ng-hide="hideAccountNo">{{e.AccountNo}}</td>
          <td ng-show="hideAccountNo">********</td>
     </tr>
</table>


When you click on hide Account number checkbox, the accountNo column will be masked with ******.

<th ng-hide="hideAccountNo">AccountNo</th>
<th ng-show="hideAccountNo">AccountNo</th>

Initially both the value of ng-hide and ng-show are false, when you click on hide Account number checkbox, both directive value (hideAccountNo) will be true.

Output:
maskinghide
▲