---

Search posts under AngularJS:

---

Show/Hide in AngularJS

How to perform show and hide operation in AngularJS?

To perform Show and Hide operation of an element in AngularJS, we use ng-show and ng-hide directive respectively.

1. ng-show - if true, shows the element
2. ng-hide - if true, hides the element

In below code snippet, check box element has ng-model set as "IsShowHide" and the same is being used for ng-show and ng-hide directive.

<div ng-app>
    Toggle Check it: <input type="checkbox" ng-model="IsShowHide" />
    <div ng-show="IsShowHide" style="width:50px;height:50px;background-color:red;"></div>
    <hr/>
    <div ng-hide="IsShowHide" style="width:50px;height:50px;background-color:green;"></div>
</div>

Output