AngularJS ng-hide Directive

Last Updated : 03 Aug, 2022

The ng-hide Directive in AngluarJS is used to show or hide the specified HTML element. If the expression given in the ng-hide attribute is true then the HTML elements hide. In AngularJS there is a predefined class named ng-hide which is used to set the display to none.

Syntax:

<element ng-hide="expression"> 
    Contents... 
</element>

Parameter:

expression: It specifies the element will be hidden if the expression returns true.

Example 1: This example uses the ng-hide Directive to display whether the entered number is a multiple of 5 or not.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>ng-hide Directive</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body ng-app="app" style="text-align:center">
    <div ng-controller="geek" ng-init="val=0">
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <h2>ng-hide Directive</h2>
        Enter a number:
        <input type="text" ng-model="val" ng-keyup="check(val)">
        <div ng-hide="hide">
            <h3>
                The number is multiple of 5
            </h3> 
        </div>
        <div ng-show="hide">
            <h3>
                The number is not a multiple of 5
            </h3> 
        </div>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['$scope', function($scope) {
            $scope.check = function(val) {
                $scope.hide = val % 5 == 0 ? false : true;
            };
        }]);
    </script>
</body>
</html>

Output:

Example 2: This example uses the ng-hide Directive to hide content.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <title>ng-hide Directive</title>
</head>

<body>
    <div ng-app="app" ng-controller="geek">
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>ng-hide Directive</h2>
        <input id="chbhide" 
               type="checkbox" 
               ng-model="hide" />
        <label for="chbhide">
             Hide Paragraph 
        </label>
        <p ng-hide="hide" 
           style="background: green; 
                  color: white;
                  font-size: 14px;
                  width:35%; 
                  padding: 10px;">
            Hide this paragraph using ng-hide 
        </p>

    </div>
    <script>
        var myapp = angular.module("app", []);
        myapp.controller("geek", function($scope) {
            $scope.hide = false;
        });
    </script>
</body>
</html>

Output:

AngularJS ng-model Directive

Vishal Chaudhary 2

Improve

Article Tags :

AngularJS ng-hide Directive

Similar Reads

Thank You!

What kind of Experience do you want to share?