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
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>
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.
The following code displays/hides the content based on whether the check box is checked or not. Pl. tell me in detail how ng-model and ng-show directives are working together behind the scenes to produce the desired result.
<input ng-model="toggleDisplayHide" type="checkbox"/>
<div ng-show="toggleDisplayHide">Some text goes here ...</div>
The ng-show directive shows or hides the given HTML element based on the expression specified in the ng-show attribute. Is toggleDisplayHide an expression?
The ng-model directive binds the value of HTML controls to app data. Is toggleDisplayHide referring to app data here?
Is this something like this:
When the checkbox is checked, the ng-model sets the value of toggleDisplayHide to true. And ng-show comes to know that the value of the expression toggleDisplayHide is set to true, it displays the content.
Angular docs is a great place to know about those things and It's well documented as well. Just added some excerpt from the docs here:
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. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).
Refer DOC
ng-model
The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
ngModel is responsible for:
Binding the view into the model, which other directives such as
input, textarea or select require.
Providing validation behavior (i.e. required, number, email, url).
Keeping the state of the control (valid/invalid, dirty/pristine,
touched/untouched, validation errors).
Setting related css classes on the element (ng-valid, ng-invalid,
ng-dirty, ng-pristine, ng-touched, ng-untouched) including
animations.
Registering the control with its parent form.
Note: ngModel will try to bind to the property given by evaluating the
expression on the current scope. If the property doesn't already exist
on this scope, it will be created implicitly and added to the scope.
Refer DOCS
Based on that, Now to your question:
ng-show will evaluate the expression toggleDisplayHide in scope and if its truthy will display the DOM else will hide.
ng-model gives real taste of two way binding of the angularjs. The attribute provided to ngModel will bind to the respective scope property. If the property does not exist in the scope, angularjs will create automatically. So attribute should be a scope property at the end
ng-show simply hide/show some html content depending on the expression provided to the ngShow attribute. The expression can be any valid javascript expression. If the expression is Truthy, html content will be shown, otherwise it will be hidden. ngShow simply uses css property display:hide/show