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
- ng-show - This directive can show the HTML elements if and only if when it will take "1" or "TRUE", If it takes "0" or "FALSE" then it will never show the HTML element.
![1ST]()
Syntax
<!-- 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>
- ng-hide - This directive is just vice-versa of ng-show. This directive can hide the HTML elements if and only if when it will take "1" or "TRUE", If it takes "0" or "FALSE" then it will never hide the HTML element.
![Second]()
<!--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>
Simple Example - Image show and hide on the click of check-box.
<!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
![Uncheck]()
![check]()