AngularJS | ng-hide Directive

Last Updated : 30 Mar, 2021

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 than 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>

Example 1: This example uses ng-hide Directive to display the entered number is 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:

nghide

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

html

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/
    1.6.9/angular.min.js"></script>
    <head>
        <title>ng-hide Directive</title>
    </head>
    <body>
        <div ng-app="app" ng-controller="geek"  style="text-align:center">
            <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:
Before click:

nghide

After click:

nghide

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes

Related Articles

html

html