AngularJS | ng-hide Directive

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>ng-focus Directive</title>
  
    <script src=
    </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-click 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>

chevron_right


Output:
nghide

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    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>

chevron_right


Output:
Before click:
nghide
After click:
nghide



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.