Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS ng-if problems with 'f' and 'F'

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

like image 516
Michał Avatar asked Jan 25 '14 09:01

Michał


People also ask

Can we use ngIf and Ng show together?

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.

What is * in * ngIf?

The * syntax means that ngIf is a structural directive, meaning that it affects the structure of the page.

What is NG-if in AngularJS?

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 Ng-if and?

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”):


2 Answers

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

like image 100
dfsq Avatar answered Sep 22 '22 13:09

dfsq


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

like image 38
Michał Avatar answered Sep 18 '22 13:09

Michał