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,

• Overview Of AngularJS
• Modules And Controller In AngularJS
• Controllers in AngularJS
• AngularJS ng src Directive
• AngularJS ng-Repeat Directive
• Handling Events In AngularJS
• How To Use Two-Way Data Binding In AngularJS
• Filters In AngularJS

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.

var mypartone = angular.module("mymodule", []).controller("myController", function($scope)
 {
    var employees = [{
        name: "Akshay",
        gender: 1,
        dateOfBirth: new Date("July 21,1960"),
        Address: "Mumbai",
        Salary: "1234.34"
    }, {
        name: "Milind",
        gender: 2,
        dateOfBirth: new Date("July 20,1960"),
        Address: "Nashik",
        Salary: "12.34"
    }, {
        name: "Raghvan",
        gender: 1,
        dateOfBirth: new Date("July 19,1960"),
        Address: "Pune",
        Salary: "1235.34"
    }, {
        name: "Hari",
        gender: 1,
        dateOfBirth: new Date("July 18,1960"),
        Address: "Mumbai",
        Salary: "5589.34"
    }];
    $scope.employees = employees;
});

Here, we have an employees array and in that, employees array are attached to $scope object.

In our View, we are displaying Data.

<table>
    <thead>
        <tr>
            <th> Name </th>
            <th>Gender</th>
            <th>Date of Birth </th>
            <th>Address </th>
            <th>Salary </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="employee in employees">
            <td>{{employee.name }}</td>
            <td>{{employee.gender }}</td>
            <td>{{employee.dateOfBirth }}</td>
            <td>{{employee.Address }}</td>
            <td>{{employee.Salary }}</td>
        </tr>
    </tbody>
</table>

When we view this data, we have this 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:

<input type="checkbox" ng-model="HideSalary"/> Hide Salary :

<th ng-hide="HideSalary">Salary </th>
<td ng-hide="HideSalary" >{{employee.Salary }}</td>

So, when we reload the page, by default, it will show Salary Column.



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



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



We can achieve the same thing by using ng-show directive. We just have to use "!" symbol to negate the model name, as:

<th ng-show="!HideSalary">Salary </th>
<td ng-show="!HideSalary" >{{employee.Salary }}</td>

When you reload the page, you will see that.



When you click on checkbox, it hides.



Now, we will see how to mask the salary column. Just add these lines.

<th ng-hide=HideSalary">Salary </th>
<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

<td ng-hide="HideSalary" >{{employee.Salary }}</td>
<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.



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



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.