Show and Hide Directives in AngularJS

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

  • 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