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>
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.
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.
I am learning angularjs. I have a doubt in ng-show and ng-bind
Here in this code it binds value and displays it.
<input type="text" ng-model="name">
<p ng-bind="name"></p>
Here in this code it appends from Hello
<h1 ng-show="sometext">Hello {{ sometext }}</h1>
I want to know the difference.
The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
https://docs.angularjs.org/api/ng/directive/ngBind
This is different than what ng-show does in that there's no replacement done for ng-show, just a state toggle based on a boolean value.
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.
https://docs.angularjs.org/api/ng/directive/ngShow
The ng-show shows or hides the given element based on the expression provided, the ng-bind tells AngularJs to replace the text content of the specified element with the value of a given expression.
ng-bind will just replace the text in the element with the value from the model, ng-show is used to control whether an element is shown and is based on Boolean (truthy and falsey) values. It just so happens that as sometext contains a value it is truthy so it will also show the element.
They're completely different:
ng-bind, binds the value in the referenced model to the content of the elemend where the bin is, it's the same of having:
<p>{{ name }}</p>
ng-show (as well as ng-hide) is used when you want something to appear or not given some conditional expression. So in that case, that h1 will only appear if "sometext" is an expression evaluated to true
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.