Show and Hide in AngularJs Example

Posted on Updated on

AngularJs have directives to show and hide the DOM elements. The directives are

  1. ng-show
  2. ng-hide

Let us demonstrate an small example to understand better about how these directives works.

Output:

When the program is run, we see that only paragraph containing text “I am visible.” display while other doesn’t.

These  directives works on value true or false. ‘ng-show‘ will display DOM element if the value passed to it is true and same is case with ‘ng-hide‘, where it hides the DOM element if the value passed to it is true.

Let us demonstrate another example which accept  user input and displays value depending upon it.

Output:

Initial stage-

After user input-

After user input exceeds age limit over 10-

In the example above, the rows of table will be populated based on user input for age limit. However if the age limit to be added by user exceeds 10, then entire table will hide and displaying a message saying “Please enter age within range of 1-10.

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.