<!DOCTYPE html> <html> <head> <script src="angular.js"></script> </head> <body ng-app> <h3>1. Show</h3> <label>Show the square: <input type="checkbox" ng-model="mustShow" /></label><br /> <div ng-show="mustShow" style="width: 50px; height: 50px; background-color: red;"></div><br /> <br /> <h3>2. Hide</h3> <label>Hide the square: <input type="checkbox" ng-model="mustHide" /></label><br /> <div ng-hide="mustHide" style="width: 50px; height: 50px; background-color: green;"></div> </body> </html>



If we want to show or hide conditionally an element (and it's subtree) in the DOM, AngularJS gives us the ng-show and ng-hide directives.

In the example we have the mustShow and a mustHide model variables bound to a couple of checkboxes and used as conditions of a ng-show and a ng-hide directive respectively. Whenever the user changes the selected state of the checkboxes, the squares are shown or hidden.

The ng-hide directive is simply the opposite of ng-show.

These directives work by modifying the display style of a DOM element without modifying the DOM tree (the elements are still in the DOM tree).