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
|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 ElementsGive 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 directiveGive 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 DataGive 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.