O'Reilly logo

Mastering Web Application Development with AngularJS by Pawel Kozlowski, Peter Bacon Darwin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Conditional display

Showing and hiding parts of the DOM based on some conditions is a common requirement. AngularJS comes equipped with four different sets of directives for this occasion (ng-show/ng-hide, ng-switch-*, ng-if and ng-include).

The ng-show/ng-hide family of directives can be used to hide (by applying CSS display rules) parts of the DOM tree based on a result of expression evaluation:

<div ng-show="showSecret">Secret</div>

The previous code rewritten using ng-hide would look as follows:

<div ng-hide="!showSecret">Secret</div>

Note

The ng-show/ng-hide directives do the trick by simply applying style="display: none;" to hide DOM elements. Those elements are not removed from the DOM tree.

If we want to physically remove or add DOM nodes conditionally ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required