AngularJS ng-show Directive
The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression in the ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is supported by all HTML elements.
Syntax:
<element ng-show="expression">
Contents...
</element>
Parameter Value:
- expression: It specifies the element will be displayed only if the required expression returns true.
Example 1: This example uses the ng-show Directive to display the HTML element after checking the checkbox.
HTML
<!DOCTYPE html>
< html >
< head >
< title >ng-show Directive</ title >
< script src =
</ script >
</ head >
< body >
< div ng-app = "app" ng-controller = "geek" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h2 >ng-show Directive</ h2 >
< input id = "chshow"
type = "checkbox"
ng-model = "show" />
< label for = "chshow" >
Show Paragraph
</ label >
< p ng-show = "show"
style="background: green;
color: white;
font-size: 14px;
width:35%;
padding: 10px;">
Show this paragraph using ng-show
</ p >
</ div >
< script >
var myapp = angular.module("app", []);
myapp.controller("geek", function($scope) {
$scope.show = false;
});
</ script >
</ body >
</ html >
|
Output:
Example 2: This example uses the ng-show Directive to display entered number a is a multiple of 5 or not.
HTML
<!DOCTYPE html>
< html >
< head >
< title >ng-show 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 >
< h3 >ng-show Directive</ h3 >
Enter a number:
< input type = "text" ng-model = "val"
ng-keyup = "check(val)" >
< div ng-hide = "show" >
< h3 >
The number is multiple of 5
</ h3 >
</ div >
< div ng-show = "show" >
< 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.show = val % 5 == 0 ? false : true;
};
}]);
</ script >
</ body >
</ html >
|
Output:
Last Updated :
03 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...