This article shows how to show and hide using ng-show and ng-hide (in AngularJS).
Description
Same like Java-Script and Jquery, In AngularJS we can show and hide HTML elements, and it is very easy to show and hide HTML elements by using ng-show and ng-hide directives. ng-show and ng-hide takes boolean variable or expressions that evaluates to boolean How to use
<!-- If value is TRUE --> <ANY ng-show="TRUE"> This will Always show </ANY>
<!-- If value is FALSE --> <ANY ng-show="FALSE"> This will Never show </ANY>
<!--If value is TRUE--> <ANY ng-hide="TRUE"> This will Always Hide </ANY>
<!--If value is FALSE--> <ANY ng-hide="FALSE"> This will Never hide </ANY>
<!doctype html>
<html ng-app> <head> <script src="angular.min.js"></script> </head> <body> <center> <h2> If you want to show then check the ChekBox<h2> </br></br></br> <center> Click me: <input type="checkbox" ng-model="checked"><br /> <div ng-show="checked"> <img src="show.png"> </div> <div ng-hide="checked"> <img src="hide.png"> </div> </center> </center> </body> </html>
Output
Azure in 24 Days