ng-show and hide directives in AngularJS

The ng-show and hide directives are used to show or hide the HTML element according to the condition. This is useful while creating an AngularJS application.

In jQuery, it is done with show() and hide() methods or with css() method.

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"

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.

Visible only those <span> elements that have ng-show="true" and ng-hide="false".

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

Using only ng-show directive to show or hide the <div> element based on click.

Define tab variable with value 1 using ng-init directive.

Creating a simple tab layout with <ul > and <div > containers. Attach ng-click directive on the <li> that will change tab variable value on click and define ng-show directive with expression on <div > containers.

Based on the tab value <div> container will be visible.

Completed Code

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

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;
}

Output 


 

3. Conclusion

In this tutorial, I showed how you can use ng-show and hide directives to show or hide HTML elements within the page with AngularJS.

Created a simple tab layout using this directive.

 

Related Post

Spread the love

Be First to Comment

Leave a Reply

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