Show and Hide Directives 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

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.

Syntax


<ANY ng-show="TRUE">
This will Always show
</ANY>


<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.


<ANY ng-hide="TRUE">
This will Always Hide
</ANY>


<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