ng-hide and ng-show in AngularJS:-
In this topic, we will discuss ng-hide and ng-show directives in Angular with examples.
ng-hide and ng-show directives are used to control the visibility of the HTML elements.
Example (1):- When checkbox is unchecked, the all columns should be shown.
When we checkbox is checked, the City column should be hidden.
Demo.js
var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {
var employees = [
{ name: "Anu", gender: "Female", salary: 5000, city: "Noida" },
{ name: "Santosh Kumar Singh", gender: "Male", salary: 6000, city: "Patna" },
{ name: "Abhinav Kumar", gender: "Male", salary: 5000, city: "New Delhi" },
{ name: "Manorma", gender: "Female", salary: 4000, city: "New Delhi" },
{ name: "Gagan", gender: "Female", salary: 3000, city: "Haryana" },
{ name: "Priyanka", gender: "Female", salary: 7000, city: "Delhi" },
{ name: "Pramod Kumar Sah", gender: "male", salary: 8000, city: "Madhuabni" },
];
$scope.employees = employees;
});
Demo.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="angular.min.js"></script>
<script src="Demo.js"></script>
<style>
body {
font-family: Arial;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
th {
border: 1px solid black;
padding: 5px;
text-align: left;
}
</style>
</head>
<body ng-app="myModule">
<h3>ng-hide and ng-show in AngularJS Demo by santosh-asp.com </h3>
<div ng-controller="myController">
<input type="checkbox" ng-model="hideCity" />Hide City
<br /><br />
<table style="width:43%;">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th ng-hide="hideCity">City</th>
<th>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="hideCity"> {{ employee.city }} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Notice ng-model directive on the checkbox is set to hideCity. hideCity variable is then used as the value for ng-hide directive on the th and td elements that displays City. When the page is first loaded, hideCity variable will be undefined which evaluates to false, as a result City column will be visible. When the checkbox is checked, hideCity 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 city td and it's th element. When the checkbox is unchecked, false value is stored in the hideCity variable, which is then used by the ng-hide directive to display the City column.
Example (2):- The following example masks and unmasks the City column values using ng-hide and ng-show directives, depending on the checked status of the Hide City checkbox.
Demo.js
var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {
var employees = [
{ name: "Anu", gender: "Female", salary: 5000, city: "Noida" },
{ name: "Santosh Kumar Singh", gender: "Male", salary: 6000, city: "Patna" },
{ name: "Abhinav Kumar", gender: "Male", salary: 5000, city: "New Delhi" },
{ name: "Manorma", gender: "Female", salary: 4000, city: "New Delhi" },
{ name: "Gagan", gender: "Female", salary: 3000, city: "Haryana" },
{ name: "Priyanka", gender: "Female", salary: 7000, city: "Delhi" },
{ name: "Pramod Kumar Sah", gender: "male", salary: 8000, city: "Madhuabni" },
];
$scope.employees = employees;
});
Demo.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="angular.min.js"></script>
<script src="13.js"></script>
<style>
body {
font-family: Arial;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
th {
border: 1px solid black;
padding: 5px;
text-align: left;
}
</style>
</head>
<body ng-app="myModule">
<h3>ng-hide and ng-show in AngularJS Demo by santosh-asp.com </h3>
<div ng-controller="myController">
<input type="checkbox" ng-model="hideCity" />Hide City
<br /><br />
<table style="width:43%;">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th ng-hide="hideCity">City</th>
<th ng-show="hideCity">City</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td> {{ employee.name }} </td>
<td> {{ employee.gender}} </td>
<td ng-hide="hideCity"> {{ employee.city }} </td>
<td ng-show="hideCity"> *****</td>
<td> {{ employee.salary}} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
ng-hide and ng-show directives are used to control the visibility of the HTML elements.
Example (1):- When checkbox is unchecked, the all columns should be shown.
When we checkbox is checked, the City column should be hidden.
Demo.js
Demo.html
Notice ng-model directive on the checkbox is set to hideCity. hideCity variable is then used as the value for ng-hide directive on the th and td elements that displays City. When the page is first loaded, hideCity variable will be undefined which evaluates to false, as a result City column will be visible. When the checkbox is checked, hideCity 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 city td and it's th element. When the checkbox is unchecked, false value is stored in the hideCity variable, which is then used by the ng-hide directive to display the City column.
Example (2):- The following example masks and unmasks the City column values using ng-hide and ng-show directives, depending on the checked status of the Hide City checkbox.
Demo.js
Demo.html