AngularJS ng-hide Directive
Last Updated :
03 Aug, 2022
Improve
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.
<!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.
<!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:
