CODEWITHSUNDEEP
angularjs
Alan2
Alan2

Reputation: 24572

ng-if or ng-show to hide and show a DIV?

The code I am working on has this:

<div ng-if="cos.connectMessage" style="text-align: center;" class="ng-scope">
    Unable to establish a connection to the localhost server for 5 minutes.</div>

Is there any advantage to using ng-show or ng-if to control the visibility of this message?

Upvotes: 1

Views: 16968

Answers (3)

Vinit Solanki
Vinit Solanki

Reputation: 2023

If you are using ng-if="false" then html content under ng-if will not includ in your html page, but if you are using ng-hide="true" or ng-show="false" then html part includ in your html page but it will only in hidden mode.

Upvotes: 0

Jenish Rabadiya
Jenish Rabadiya

Reputation: 6766

ng-show

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. (reference)

ng-if

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM. (reference)

Note: When ng-if removes the element it also removes the associated scope for that element and it get recreated when condition turns true.

Advantage

I prefer the use of ng-if specifically when number of watchers bound inside the element is more as it would completely destroy the scope so making the UI a bit faster. But for small elements or elements containing less watchers does cost overhead of removing scope and recreating it.

Upvotes: 2

Sathish kumar
Sathish kumar

Reputation: 16

You can refer this for your solution, already lot of things asked in that what is the difference between ng-if and ng-show/ng-hide

Upvotes: 0

Related Questions