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-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:
The previous code rewritten using
ng-hide would look as follows:
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 ...