Search within TutorialsPark

AngularJS Show Hide and Remove Elements


Learn how to use AngularJS Element Directives to Show Hide and Remove Elements.


AngularJS Element Directives : Show and Hide and Remove Directives

The AngularJS provides a set of directives to set the CSS styles and other appearances of the Elements in the Document.

These Directives style the elements dynamically to reflect the changes within the Data Model.A List of such Directives are shown Below.

Table : AngularJS Values of Build-in ng-repeat Values

Name Description Try It
ng-if To add or remove elements from the Document. Try»
ng-class To set an expression that should be processed when the content gets loaded. Try»
ng-hide To set whether AngularJS should scroll the viewport when the content gets loaded. Try»
ng-show To set whether AngularJS should scroll the viewport when the content gets loaded. Try»
ng-style To set whether AngularJS should scroll the viewport when the content gets loaded. Try»

AngularJS Element Directives : Show and Hide Elements

AngularJS provides two directives to set the visibility of elements, these are the directives of ng-show and ng-hide.

The directive ng-hide sets the CSS style property of displayto none when the expression within the directive evaluates to true.

Similarly, the directive ng-show shows the element when the expression within the directive is evaulated to true.

: AngularJS Element Directives Show and Hide Elements

Give it a TRY! » Note:If the values of both the directive evaluates to false, opposite action is performed.

AngularJS Element Directives : Removing Elements

Instead of hiding Elements, you can remove them from the DOM using the directive ng-if.

In the demo, we have inverted the values of last table column Paid, if the value within the directive is evaluated to false, the element is removed, effect is same as hidden.

Example: Angular Element Directive Removing Elements using ng-if directive

Give it a TRY! » Note:Select the option to change the status of Paid


AngularJS Element Directives : Using Directive ng-hide on Table Rows

The Directive of ng-show , ng-hide and ng-if are in conflict when applied to tables, because ng-if removes the element from the DOM and ng-hide simply hides it.

In the Demo, when a table row is removed using ng-if, the stripe pattern is maintainer, while with ng-hide the stripe pattern gets disturbed because the element still in the DOM, but hidden.

Example: Angular JS Controllers Getting Keys along with Data

Give it a TRY! » Note: Since ng-hide is used the pattern of table strip gets disturbed when paid bills are hidden.


AngularJS Element Directive : Resolving Transclusion with a Filter

The problem of using ng-hide in tables is that the pattern of stripes gets disturbed, this issue can be resolved using a filter to select(or filter) data before hand, in this case elements with property paid as false.

In the demo, the bills paid get filtered out and then the remaining elements are assigned table rows.Hence the stripped table pattern remains intact.

Example: AngularJS Element Directives Resolving Transclusion using a Filter

Give it a TRY! » Note: Only unpaid bills are selected, and alternate striped patter remains intact.