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, the employees array is attached to the $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 the 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 the Salary column.

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

We can achieve the same thing by using the ng-show directive. We just have to use the "!" 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 the 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>
<th ng-show="HideSalary">Salary</th> <!-- this will be false hidden -->

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

As you can see, I did not use any binding expression but used * to mask the salary column, on click of the checkbox. So, let's reload the page.

Now, let's click on the 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.