Post
Ask Question

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.

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.

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.

Address

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

Hide salary

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

Salary column

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.

Reload

When you click on the checkbox, it hides.

Checkbox

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.

Localhost

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


Similar Articles