[email protected]      beta
Donate

AngularJs ng-show ng-hide directives

Overview: Understanding ng-show ng-hide directive, Usage of AngularJs ng-show ng-hide directives with an example, Conditionally show / hide HTML element in AngularJs.

What is ng-show and ng-hide in Angularjs ?

In Angularjs with directives, we can do things like DOM Manipulation, Data Binding and handle Events. Showing and hiding elements on a page is a ubiquitous functionality that every developer implement while working on web application. AngularJs provide two directives ng-show and ng-hide which is used to change the visibility (show/hide) of HTML element.

As in single page application (SPA), we want to display different views based on condition. Thus angularjs provide direct ng-show and ng-hide directive, so we don’t need to use CSS or Javascript to hide/show specific elements.

Directive ng-show is used to show the HTML element only if the expression evaluates to true. And ng-hide is the opposite of ‘ng-show’ i.e., used to hide the HTML element.


Example : Using ng-show in Angularjs.

Here in this example will see a simple use of ng-show directive to display divs. We have 3 Checkboxes as red, green, blue, with respective Divs. Now on checkbox checked will display individual div.

Heres the magic of AngularJS .i.e without writing any javascript code or applying any CSS we able to show or hide our HTML content.

Just my adding attribute ng-show to our HTML markup we able to display respective divs.

<div ng-app>
    Red <input type="Checkbox" ng-model='myRed' > 
    Green <input type="Checkbox" ng-model='myGreen' > 
    Blue <input type="Checkbox" ng-model='myBlue' > 

    <div ng-show="myRed" style="background-color: red; color: white;">
        <h3>This is RED</h3>
    </div>
    <br/>
    <div ng-show="myGreen"  style="background-color: green;color: white;">
        <h3>This is GREEN</h3>
    </div>
    </br>
    <div ng-show="myBlue"  style="background-color: blue;color: white;">
        <h3>This is BLUE</h3>
    </div>
</div>

Try is yourself

Output:

Output of ng-show directive example


Example : Using ng-hide in Angularjs.

Here in this example will see a simple use of ng-hide directive to hiding our div tags. We have 3 Checkboxes as red, green, blue, with respective Divs. Now on checkbox checked will hide individual div.

Just my adding attribute ng-hide to our HTML markup we able to hide specific divs and on unchecked respected divs gets displayed.u

<div ng-app>
    Red <input type="Checkbox" ng-model='myRed' > 
    Green <input type="Checkbox" ng-model='myGreen' > 
    Blue <input type="Checkbox" ng-model='myBlue' > 

    <div ng-hide="myRed" style="background-color: red; color: white;">
        <h3>This is RED</h3>
    </div>
    <br/>
    <div ng-hide="myGreen"  style="background-color: green;color: white;">
        <h3>This is GREEN</h3>
    </div>
    </br>
    <div ng-hide="myBlue"  style="background-color: blue;color: white;">
        <h3>This is BLUE</h3>
    </div>
</div>

Try is yourself

Output:

Output of ng-hide directive example


  Popular Tag
  Recent Posts
  Follow Us
If you find these tutorials helpful then please donate. It will lead me to do more tutorials.
Donate