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?
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.
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
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.
Related
As I know ng-show and ng-hide both are used to Show or Hide the given HTML element. But I was asked a question in an interview, that why do we need ng-hide if we have ng-show. What is the reason that we should favor ng-show over ng-hide or vice versa?
I know the difference between ng-if vs ng-show/ng-hide but Ii want to know the difference between ng-show and ng-hide as the functionality of these two are same.
The reason is simple, it is used to simplify the coding, in most of the scenarios we can easily miss ! in our code and it is also not a good coding practice.
NG-HIDE will be used in the scenario where condition is true most of the times but false in some conditions whereas NG-SHOW will be used in the scenario where condition is false most of the times but true in some conditions.
Both of them will check for truthy values.
The ng-hide directive hides the HTML element if the expression evaluates to true.
ng-hide is also a predefined CSS class in AngularJS, and sets the element's display to none.
<element ng-hide="expression"></element>
When used as a CSS class:
<element class="ng-hide"></element>
The ng-show directive shows the specified HTML element if the expression evaluates to true, otherwise the HTML element is hidden.
<element ng-show="expression"></element>
This information was taken from: w3schools-ngHide, w3schools-ngShow
The difference between ng-if and ng-show/ng-hide is,
ng-if - It renders the HTML content if the condition is true, otherwise it does not render any content on DOM.
ng-show/ng-hide - It shows or hides the content of html, which is already present on DOM.
The actual html element is present in DOM, only we are showing or hiding it based on condition.
I am using a datepicker control on my page which is rendered through ng-if dependent on a specific dropdown value.
The problem I'm facing is since at the time of rendering, that datepicker input is not part of DOM, so later when I change the value of dropdown, the datepicker control does not work.
If I use ng-show, I encounter issues in validations.
Any suggestions?
Thanks.
Use ng-show/ng-hide instead of ng-if, because the ng-if directive removes or recreates a portion of the DOM tree based on an expression. If the expression assigned to ng-if evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
More details. please refer this link : what is the difference between ng-if and ng-show/ng-hide
Try "$scope.apply()" after the toggling of ng-if variable.
So I have a ng-repeat that i want to show conditionally. If I wrap it with ng-if does that stop it from looping? Im trying to be careful about resources
ng-if will include the DOM node only if the expression is valid. If it is not valid, then the ng-repeat will not fire, if it is within an 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.
Logically ng-repeat does not create any DOM element with empty data object. This is exactly the same case as wrapping it inside ng-if.
SO I think, from resource point of view your ng-if is absolutely redundant.
<div ng-if="expression">
<!-- If expression is false, this block will be 'ignored' -->
<div ng-repeat="item in items">
</div>
<!-- -->
</div>
there is a ng-if animation example in this doc:https://docs.angularjs.org/api/ng/directive/ngIf
if you clicking the checkbox quickly and repeatedly,you will find more than one element will be displayed,I don't know how to avoid it.
This happens because ngIf behaves different to ngShow for example. ngShow simply adds a display: none style to the element that must be hidden, while ngIf does the following:
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.
So if the animation takes a bit long, there will be more than one element in the DOM.
In Olivvv's example, if you just change the delay of .animate-if.ng-enter, .animate-if.ng-leave to 0.001s you will se that you cannot get more than one element.
Here for you to see it is a forked version of the official AngularJS documentation. http://plnkr.co/edit/ok7nwOIRpR1TYYRkBRXj?p=preview
I have only modified its delay from 0.5s to 0.001s
there is an ng-show directive in angular, but is there a ng-render directive? that adds the template of a directive to the dom only when conditions are met?
the problem with ng-show is that it only uses css to hide elements, and since I am creating an enormous list, and I am only displaying the visble elements, I dont want the content of not visible content to be partially rendered.
You can use ng-if or ng-switch. Neither include content unless your conditions are met.