Post
Ask Question

ng-show Directive in AngularJS

In this post we will study ng-show directive in angular JS. ng- show directive is used to make HTML elements visible. Let us see this with the help of an example.

Write the following HTML mark up in the webpage.

  1. <!doctype html>  
  2. <html ng-app>  
  3.   <head>  
  4.     <title>My Angular App</title>  
  5.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
  6.   </head>  
  7.   <body>  
  8. <div ng-app="">  
  9.    
  10. <p ng-show="true">This text is visible.</p>  
  11.    
  12. <p ng-show="false">This text is not visible.</p>  
  13.    
  14. </div>   
  15.   </body>  
  16. </html>  
We have taken twp <p> tags in HTML. In one of the tags we will assign a value true to the ng-show directive and in the other we will keep the value to false. Let us see how the output turns out.

output
This is how we can use ng-show directive in AngularJS. I hope this post was useful to beginners.