ng-Hide And ng-Show In AngularJS

In this article, you will learn about ng-Hide And ng-Show in AngularJS.

Overview

In this article, we will see ng-hide and ng-show elements in AngularJS. ng-Hide and ng-Show directives are used to control the visibility of the HTML elements . Let's see with an example.

For more articles on AngularJS, kindly refer to,

Introduction

As I said earlier, ng-Hide and ng-Show directives are used to control the visibility of the HTML elements.

Let's switch back to our Controller,

This is our controller function.
  1. var mypartone = angular.module("mymodule", []).controller("myController"function($scope)   
  2.  {  
  3.     var employees = [{  
  4.         name: "Akshay",  
  5.         gender: 1,  
  6.         dateOfBirth: new Date("July 21,1960"),  
  7.         Address: "Mumbai",  
  8.         Salary: "1234.34"  
  9.     }, {  
  10.         name: "Milind",  
  11.         gender: 2,  
  12.         dateOfBirth: new Date("July 20,1960"),  
  13.         Address: "Nashik",  
  14.         Salary: "12.34"  
  15.     }, {  
  16.         name: "Raghvan",  
  17.         gender: 1,  
  18.         dateOfBirth: new Date("July 19,1960"),  
  19.         Address: "Pune",  
  20.         Salary: "1235.34"  
  21.     }, {  
  22.         name: "Hari",  
  23.         gender: 1,  
  24.         dateOfBirth: new Date("July 18,1960"),  
  25.         Address: "Mumbai",  
  26.         Salary: "5589.34"  
  27.     }];  
  28.     $scope.employees = employees;  
  29. });  
Here, we have an employees array and in that, employees array are attached to $scope object.

In our View, we are displaying Data.
  1. <table>  
  2.     <thead>  
  3.         <tr>  
  4.             <th> Name </th>  
  5.             <th>Gender</th>  
  6.             <th>Date of Birth </th>  
  7.             <th>Address </th>  
  8.             <th>Salary </th>  
  9.         </tr>  
  10.     </thead>  
  11.     <tbody>  
  12.         <tr ng-repeat="employee in employees">  
  13.             <td>{{employee.name }}</td>  
  14.             <td>{{employee.gender }}</td>  
  15.             <td>{{employee.dateOfBirth }}</td>  
  16.             <td>{{employee.Address }}</td>  
  17.             <td>{{employee.Salary }}</td>  
  18.         </tr>  
  19.     </tbody>  
  20. </table>  
When we view this data, we have this output:

output

Now, we will add a checkbox here to hide salary.

So, let's add an input element and add ng-model directive and add that to <th> and <td> sections, as shown below:
  1. <input type="checkbox" ng-model="HideSalary"/> Hide Salary :  
  2.   
  3. <th ng-hide="HideSalary">Salary </th>  
  4. <td ng-hide="HideSalary" >{{employee.Salary }}</td>  
So, when we reload the page, by default, it will show Salary Column.

output

Now, when we check the Hide Salary Checkbox, you will notice that it hides Salary column.

output

When we unchecked it, it displays the salary column again.

output

We can achieve the same thing by using ng-show directive. We just have to use "!" symbol to negate the model name, as:
  1. <th ng-show="!HideSalary">Salary </th>  
  2. <td ng-show="!HideSalary" >{{employee.Salary }}</td>  
When you reload the page, you will see that.

output

When you click on checkbox, it hides.

output

Now, we will see how to mask the salary column. Just add these lines.
  1. <th ng-hide=HideSalary">Salary </th>  
  2. <th ng-show="HideSalary">Salary </th>   
As you have noticed, in the two <td>, these will be visible.

<th ng-hide=HideSalary">Salary </th>
And
<th ng-show="HideSalary">Salary </th> this will be false hidden

  1. <td ng-hide="HideSalary" >{{employee.Salary }}</td>  
  2. <td ng-show="HideSalary" >****</td> same will be hidden   
As you can see, I did not use any binding expression but used * to mask salary column, on click of checkbox. So, let's reload the page.

output

Now, let's click on checkbox to mask the salary column.

output

As you can see from the above output, we have masked the salary column.

Conclusion: So, this was all about ng-Hide and ng-show in AngularJS.