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.

💡 Hat dir das Tutorial geholfen?

Wir bieten auch Angular-Intensiv-Schulungen an, um dich möglichst effektiv in das Thema Angular zu begleiten. Im Kurs kannst du die Fragen stellen, die du nur schlecht googeln kannst, z.B. "Besserer Weg, um meine Applikation zu strukturieren?". Wir können sie dir beantworten.

• ✔ Öffentliche Termine verfügbar
• ✔ Vor Ort, als auch Remote
• ✔ Deutsch/Englisch möglich

Jetzt weiter lernen

💡 Keine Lust zu lesen?

Nicht jeder lernt am besten aus Büchern und Artikeln. Lernen darf interaktiv sein und Spaß machen. Wir bieten dir auch Angular Intensiv-Schulungen an, um dich möglichst effektiv in das Thema Angular zu begleiten. Im Kurs kannst du die Fragen stellen, die du nur schlecht googeln kannst, z.B. "Besserer Weg, um meine Applikation zu strukturieren?". Wir können sie dir beantworten.

• ✔ Öffentliche Termine verfügbar
• ✔ Vor Ort, als auch Remote
• ✔ Deutsch/Englisch möglich

Mehr Informationen zur Angular-Schulung

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>