ng-show and hide directives in AngularJS

If you are from the jQuery background for hiding and showing element you generally use show() and hide() function or may be used css() function when an event occurs.

AngularJS provide directives for it also i.e, ng-hide and ng-show.

ng show and hide directives in AngularJS


Contents

  1.  ng-hide and ng-show
  2.  Creating Tab Structure
  3.  Conclusion

 


 

1. ng-hide and ng-show

  • ng-hide directive

It shows the element when the expression is false, otherwise, it hides it.

Syntax –

ng-hide="expression"
  • ng-show directive

It is just opposite of ng-hide directive, it shows the element when the expression is true, otherwise, it hides it.

Syntax –

ng-show="expression"

For example, let’s use both directives in one example, and create 4 span elements. Add ng-show directive in first two and ng-hide in next two spans and run the program.

When you run it in the output you will see span elements with ng-show directive will show only which contains true expression and in ng-hide, it’s just opposite happening.

Here, is the completed code with an Output-

Completed Code

<!doctype html>
<html ng-app=''>
 <head>
 <title>ng-show and hide directives in AngularJS</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" type='text/javascript'></script>
 </head>
 
 <body > 
 <h3>ng-show directive</h3>
 <span ng-show="true">ng-show with true expression</span><br/>
 <span ng-show="false">ng-show with false expression</span><br/> 
 
 <h3>ng-hide directive</h3>
 <span ng-hide="true">ng-hide with true expression</span><br/>
 <span ng-hide="false">ng-hide with false expression</span> <br/>
 
 </body>
</html>

Output


 

2. Creating Tab Structure

Let’s create a simple tab structure, within the example, we will  using only ng-show directive. Using this we will show or hide the <div> element based on click.

In the example, we have a main container which contains the unordered list which we are using for tab header and for holding tab content we created 3 divs.

Define a tab variable and initialize it with 1 using ng-init with <div class="tabs-container"> and we are changing the tab value when unordered list item gets clicked (ex- ng-click="tab = 1" ).

Using ng-show directive in <div >  which contains an expression.

Completed Code (index.html)

<!doctype html>
<html ng-app=''>
 <head>
 <title>ng-show and hide directives in AngularJS</title>
 <link href="style.css" rel='stylesheet' type='text/css'>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
 </head>
 
 <body > 
 
 <div class="tabs-container" ng-init="tab = 1">
 <!-- Tab header -->
 <ul class="tabs-header">
 <li ng-click="tab = 1">AngularJS</li>
 <li ng-click="tab = 2">Controller</li>
 <li ng-click="tab = 3">ng-include</li>
 </ul>
 
 <!-- Tab content -->
 
 <!-- Tab 1 -->
 <div ng-show="tab == 1" class="tab" >
 <h3>What is AngularJS?</h3>
 <p>AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, declarative and maintainable front-end applications which provides solutions to standard infrastructure concerns.</p>
 
 <a href="http://makitweb.com/what-is-angularjs/" target="_blank">More..</a>
 </div>
 
 <!-- Tab 2 -->
 <div ng-show="tab == 2" class="tab">
 <h3>Modules and Controllers in AngularJS</h3>
 <p>Controllers is a JavaScript constructor functions which are bound to a particular scope.</p>

<p>For defining controller in the Angular, we use angular.controller method which allows us to bind controller to the module. It takes controller name and a function.</p>
 
 <a href="http://makitweb.com/modules-and-controllers-in-angularjs/" target="_blank">More...</a>
 </div
 
 <!-- Tab 3 -->
 <div ng-show="tab == 3" class="tab">
 <h3>ng include directives in AngularJS</h3>
 <p>AngularJS allow us to embed HTML page within another HTML page using ng-include directive.</p>
 
 <a href="http://makitweb.com/ng-include-directives-angularjs/" target="_blank">More...</a>
 </div
 </div>
 
 </body>
</html>

Completed Code (style.css)

.tabs-container{
 border: 0px solid black;
 width: 50%;
 height: 400px;
 margin: 0 auto;
 padding: 5px;
}

/* tab header */
.tabs-header{
 list-style: none;
 margin: 0;
 padding: 0;
}

.tabs-header li{
 float: left;
 padding: 10px 15px;
 text-align: center;
 margin-right: 1px;
 background: cornflowerblue;
 border: 5px 0px;
 color: white;
}

.tabs-header li:hover{
 cursor: pointer;
}

/* tab content */
.tab{
 display: inline-block;
 width: 99%;
 height: 300px;
 clear: both;
 border: 1px solid black;
 margin-top: 5px !important;
 padding:5px;
}

.tab p{
 line-height: 25px;
 letter-spacing: 1px;
 font-size:17px; 
 text-align: justify; 
}

.tab a{
 text-decoration: none;
 color: blue;
}

When you run the program it gives you the following result –

For download this example code –


 

3. Conclusion

We have learned that how you can use ng-show and ng-hide directives to show or hide an element in AngularJS and created a tab structure using ng-show directive, within the example, we created 3 tabs changing tab based on click.

This is just a quick tutorial on ng-show and hide directives you can use it many other different-different situations within your project.

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *