Can anybody explain to me why Angularjs ngIf
directive reads 'f' and 'F' like false
?
Simple example which does not work:
<input type="text" ng-model="test" />
<div ng-if="test">{{test}}<div>
If you put 'f' or 'F' nothing shows in div, any other letter or sine works ok.
Demo: http://plnkr.co/edit/wS4PqmARXG2fsblUkLpH?p=preview
ng-if is better in this regard. Using it in place of ng-show will prevent the heavy content from being rendered in the first place if the expression is false. However, its strength is also its weakness, because if the user hides the chart and then shows it again, the content is rendered from scratch each time.
The * syntax means that ngIf is a structural directive, meaning that it affects the structure of the page.
The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element.
What is the difference between ngIf and *ngIf in Angular? ngIf is the directive. Because it's a structural directive (template-based), you need to use the * prefix to use it into templates. *ngIf corresponds to the shortcut for the following syntax (“syntactic sugar”):
ngIf
uses toBoolean
check internally. Here is toBoolean
itself:
function toBoolean(value) {
if (typeof value === 'function') {
value = true;
} else if (value && value.length !== 0) {
var v = lowercase("" + value);
value = !(v == 'f' || v == '0' || v == 'false' || v == 'no' || v == 'n' || v == '[]');
} else {
value = false;
}
return value;
}
As you can see, there will be an issue not only with f
letter, but also with '0', 'no', 'n', etc. It's not going to be fixed though. However toBoolean
is likely to be removed in future versions.
See this discussion on Github: https://github.com/angular/angular.js/issues/1229?source=cc
I found simple solution to resolve my problem with validation by that:
<input type="text" ng-model="test" />
<div ng-if="test.length > 0">TEST: {{test}}<div>
plunker: http://plnkr.co/edit/epDLYitkhCDMJJebfSON?p=preview
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With