The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If given expression in ng-show attribute is true then the HTML element will display otherwise it hide the HTML element. It is supported by all HTML elements.
Syntax:
<element ng-show="expression"> Contents... </element>
Example 1: This example uses ng-show Directive to display the HTML element after checked the checkbox.
<!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:
Before checked the checkbox:
After checked the checkbox:
Example 2: This example uses ng-show Directive to display entered number is multiple of 5 or not.
<!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 > < h2 >ng-show Directive</ h2 > 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: