The AngularJS ng-show & ng-hide
directive is used show or hide the DOM element based its expression.
The element is display or hide by removing or adding the ng-hide
CSS predefined class onto the element.
Syntax
<div ng-show="value"></div> <div ng-hide="value"></div>
<html> <head> <title>My first AngularJS ng-hide and ng-show Directive code</title> <Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"> </Script> <Script> function appController($scope) { $scope.checked = true; } </Script> </head> <body> <div ng-app ng-controller="appController"> Click To Show/Hide: <input type="checkbox" ng-model="checked"><br/> <div> Show: <div ng-show="checked"> <span></span> This will show up when checkbox is checked. </div> </div> <div> Hide: <div ng-hide="checked"> <span></span> This will hide when checkbox is checked. </div> </div> </div> </body> </html>See Live Example