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.
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:
When you check the checkbox, the AccountNo column will not be visible.
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:
