Show and Hide Directives in AngularJS
Show and Hide directives are used to show or hide the content. Show directive can be used by using the ng-show directive as shown below. ng-show directive takes input value as true or false.
<!DOCTYPE html> <html> <head> <script src="scripts/angular.min.js"> </script> </head> <body ng-app> <input type="checkbox" ng-model="check1" /><label for="check1">Checkbox for Show Directive</label> <div ng-show="check1"> <h1>AngularJS Show Directive</h1> <p>This is example for Show directive in AngularJS</p> </div> </body> </html>
In he above code, we have defined ng-model as check1 for checkbox and provided check1 for dive ng-show directive. When we open the code in browser, div tag hides by default because checkbox is unchecked and assigns false to ng-show directive. When we select the checkbox, true assigns to ng-show and div tag will display as shown below.
Hide directive works exactly in reverse way as compared with Show directive. Hide directive represents using ng-hide and it takes input value as true or false.
<!DOCTYPE html> <html> <head> <script src="scripts/angular.min.js"> </script> </head> <body ng-app> <input type="checkbox" ng-model="check1" /><label for="check1">Checkbox for Hide Directive</label> <div ng-hide="check1"> <h1>AngularJS Hide Directive</h1> <p>This is example for Hide directive in AngularJS</p> </div> </body> </html>
By default, div content displays because checkbox is unchecked and it gives false to ng-hide directive. When we check the checkbox, true value assigns to ng-hide directive and div content will get hide as shown below.
After checking the checkbox, it hides the div content as below.
