Das merkwürdige Verhalten von ng-show (vor AngularJS 1.3)

Hinweis: Das merkwürdige Verhalten wurde in AngularJS 1.3 behoben.

Andreas Becker war so lieb und hat im AngularJS Tutorial auf das merkwürdige Verhalten von ng-show hingewiesen:

Im Beispiel erscheint nach der Eingabe eines Buchstabens der Satz “Du suchst gerade nach:” mit dem entsprechenden Zeichen dahinter. Tippe ich allerdings n oder f ein, erscheint dieser Satz nicht. Hast du dafür eine Erklärung?

Kontext: Im Tutorial geht es darum den Satz anzuzeigen, wenn man in ein Textfeld etwas eingibt (Demo).

<input type="text" ng-model="search">
<p ng-show="search">Du suchst gerade nach: {{search}}</p>

Erklärung

Wir haben im Quellcode nachgeforscht und folgende Erklärung gefunden: ng-show/ng-hide benutzen intern die Funktion toBoolean, um einen String auf true/false zu testen.

Die Funktion toBoolean sieht folgendermaßen aus:

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;
}

Das bedeutet, wenn in einem String f, 0, false, no, n oder [] steht, wird dieser als false gewertet.

Lösung

Wer das “normale” Verhalten erzwingen möchte, kann einen String schon vorher mit !! in einen Boolean-Wert konvertieren.

<input type="text" ng-model="search">
<p ng-show="!!search">Du suchst gerade nach: {{search}}</p>