So verwenden Sie „ng-model“ in AngularJS mit BEISPIELEN

By: James Hartmann James Hartmann
Hours Aktualisiert

⚡ Intelligente Zusammenfassung

ng-model in AngularJS bindet ein Eingabefeld direkt an eine Eigenschaft von $scope, keeping Ansicht und Modell sind bidirektional synchronisiert. Die folgenden Abschnitte behandeln das Attribut, drei praktische Beispiele und die häufigsten Anfängerfehler.

  • 🔗 Zwei-Wege-Bindung: ng-model überträgt Benutzereingaben in die $scope-Eigenschaft und Controller-Änderungen automatisch zurück in das Steuerelement.
  • 📝 Textbereichsbindung: Binden Sie eine mehrzeilige Zeichenkette an ein Textfeld und verwenden Sie die Escape-Sequenz \n, um Zeilenumbrüche im gerenderten Wert zu erzwingen.
  • ☑️ Kontrollkästchenstatus: Eine mit ng-model verknüpfte Checkbox speichert einen booleschen Wert. Bei true wird die Checkbox als ausgewählt dargestellt, bei false bleibt sie leer.
  • 📋 Dropdown-Listen: Füllen Sie ein Select-Element mit ng-options und binden Sie das ausgewählte Element an eine separate Modelleigenschaft.
  • ⚠️ Häufige Fehler: Wenn ein Auswahlfeld an dasselbe Objekt gebunden wird, das seinen Optionstext liefert, wird dieses Objekt bei der ersten Auswahl überschrieben.
  • ️ Validierungs-Hooks: ng-model fügt die Klassen ng-pristine, ng-dirty, ng-valid und ng-invalid hinzu, die bedingtes Styling und Formularprüfungen steuern.
MEHR LESEN

Was ist das ng-Modell in AngularJS?

ng-model ist eine Direktive in AngularJS, die das Modell repräsentiert und primär dazu dient, die „Ansicht“ an das „Modell“ zu binden. Alles, was der Benutzer in ein Steuerelement eingibt, wird direkt in eine Eigenschaft geschrieben. $scopeUnd alles, was der Controller in diese Eigenschaft schreibt, wird direkt wieder an den Controller zurückgesendet.

Angenommen, Sie möchten dem Endbenutzer eine einfache Seite wie die unten gezeigte präsentieren, auf der der Benutzer aufgefordert wird, „Vorname“ und „Nachname“ in Textfelder einzugeben. Anschließend möchten Sie sicherstellen, dass die vom Benutzer eingegebenen Informationen in Ihrem Datenmodell gespeichert werden.

Mit der ng-model-Direktive können Sie die Textfeldfelder „Vorname“ und „Nachname“ Ihrem Datenmodell zuordnen. Die Direktive stellt sicher, dass die Daten in der Ansicht und in Ihrem Modell stets synchronisiert bleiben – ganz ohne zusätzliche Ereignisbehandlung.

⚠️ Versionshinweis: AngularJS (Version 1.x) hat am 31. Dezember 2021 das Ende seines Lebenszyklus erreicht und erhält keine Sicherheitsupdates mehr. Die folgenden Beispiele funktionieren zwar weiterhin, aber in modernen Angular-Versionen wird die gleiche Zwei-Wege-Datenbindung folgendermaßen geschrieben: [(ngModel)] und erfordert das FormsModule.

Das ng-model-Attribut

Wie im vorangegangenen Abschnitt erläutert, dient das ng-model-Attribut dazu, die Daten in Ihrem Modell an die dem Benutzer präsentierte Ansicht zu binden.

Das ng-model-Attribut wird verwendet für:

  1. Steuerelemente wie Eingabefelder, Textbereiche und Auswahlelemente in der Ansicht werden an das Modell gebunden.
  2. Bereitstellung eines Validierungsverhaltens – beispielsweise kann einem Textfeld eine Validierung hinzugefügt werden, sodass nur numerische Zeichen eingegeben werden können.
  3. Den Zustand der Steuerung aufrechterhalten. Unter Zustand verstehen wir, dass Steuerung und Daten stets synchronisiert sind: Ändert sich der Wert der Daten, ändert sich der Wert in der Steuerung automatisch und umgekehrt.
  4. Dieser Zustand wird als CSS-Klassen dargestellt. AngularJS fügt hinzu ng-pristine, ng-dirty, ng-valid und ng-invalid jedem Steuerelement, das ein ng-model enthält, wird eine bedingte Formatierung zugewiesen, wodurch die Formatierung von Formularen unkompliziert wird.

Nachdem das Attribut verstanden wurde, geht es im nächsten Schritt darum, es auf die drei Steuerelementtypen anzuwenden, die Ihnen am häufigsten begegnen werden.

So verwenden Sie das ng-Modell

1) Textbereich

Das Textbereichs-Tag wird zum Definieren eines mehrzeiligen Texteingabesteuerelements verwendet. Der Textbereich kann eine unbegrenzte Anzahl von Zeichen enthalten und der Text wird in einer Schriftart mit fester Breite dargestellt.

Betrachten wir nun ein einfaches Beispiel, wie wir die ng-model-Direktive einem Textbereich hinzufügen können. In diesem Beispiel zeigen wir, wie wir eine mehrzeilige Zeichenkette vom Controller an die Ansicht übergeben und diesen Wert dem Textbereich zuweisen können.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        <textarea rows="4" cols="50" ng-model="pDescription"></textarea>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pDescription = "This topic looks at how Angular JS works \nModels in Angular JS";
    });
</script>
</body>
</html>

Code Erläuterung:

  1. Das ng-model-Direktive fügt die Membervariable mit dem Namen „p“ hinzu.Description“ zum „Textbereich“-Steuerelement. Das „pDescriptDie Variable „ion“ enthält den Text, der an das Textbereichssteuerelement übergeben wird. rows="4" und cols="50" Attribute werden einfach so angepasst, dass das Steuerelement so dimensioniert wird, dass der mehrzeilige Text korrekt angezeigt wird.
  2. Die Mitgliedsvariable „p“DescriptDem Ion wird ein mehrzeiliger Wert zugewiesen. \n Die Escape-Sequenz innerhalb der Zeichenkette bewirkt, dass der Text beim Rendern im Textbereich in eine zweite Zeile umgebrochen wird.

Ausgang:

Aus der Ausgabe geht klar hervor, dass der im Controller zugewiesene mehrzeilige Text im Textbereichs-Steuerelement angezeigt wird, aufgeteilt auf zwei Zeilen genau an der Stelle, an der \n sitzt.

Nicht verpassen:

2) Eingabeelemente

Die ng-model-Direktive funktioniert auch mit normalen Eingabeelementen. Im Folgenden binden wir gleichzeitig ein Textfeld und zwei Kontrollkästchen, um zu zeigen, wie ng-model einen String-Wert und einen booleschen Wert nebeneinander verarbeitet.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        Name : <input type="text" ng-model="pname"><br>
        Topic :<br>
        <input type="checkbox" ng-model="Topic.Controller">Controller<br>
        <input type="checkbox" ng-model="Topic.Models">Models
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pname = "Guru99";

        $scope.Topic = {
            Controller: true,
            Models: false
        };
    });
</script>
</body>
</html>

Code Erläuterung:

  1. Die ng-model-Direktive ordnet dem Texteingabefeld die Membervariable „pname“ und die Eigenschaften zu. Topic.Controller und Topic.Models zu den beiden Kontrollkästchen.
  2. Im Controller wird „pname“ die Zeichenkette „Guru99”, und dem „Topic“-Objekt werden zwei boolesche Elemente zugewiesen. Eine mit ng-model verknüpfte Checkbox liest und schreibt immer einen booleschen Wert, weshalb true Das Kästchen wird als ausgewählt angezeigt und false lässt es klar.

Ausgang:

Aus der Ausgabe,

  • Es ist deutlich zu erkennen, dass der Wert, der dem zugewiesen wurde pname Die Variable ist „Guru99 ".
  • Da der erste Grenzwert ist trueDas Kontrollkästchen für das Kontrollkästchen „Controller“ ist markiert. Ebenso ist der zweite Wert falseDas Kontrollkästchen für das Kontrollkästchen „Modelle“ ist nicht markiert.

3) Wählen Sie ein Element aus der Dropdown-Liste aus

Die ng-model-Direktive kann auch auf das Select-Element angewendet werden, sodass das vom Benutzer ausgewählte Element im Modell gespeichert wird.

Hier haben wir ein Texteingabefeld, das den Namen „Guru99”, und eine Auswahlliste mit zwei Listenelementen, „Controller“ und „Models“.

⚠️ Korrektur: Der obige Screenshot zeigt den ursprünglichen Eintrag, in dem das Select-Element an genau dasselbe gebunden war. Topics Das Objekt, das den Optionstext lieferte. Sobald ein Benutzer eine Option auswählt, überschreibt AngularJS dieses Objekt. Topics mit der ausgewählten Zeichenkette und beiden Optionen verschwindet. Die korrigierte Auflistung unten behält die Liste in einer Eigenschaft und die Auswahl in einer anderen bei und verwendet ng-options um die Liste zu erstellen.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.js"></script>
</head>
<body>
<h1>Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoCtrl">
    <form>
        Topic Description:<br><br>
        Name : <input type="text" ng-model="pName"><br>
        Topic :<br>
        <!-- Topics holds the list; selectedTopic holds the choice -->
        <select ng-model="selectedTopic" ng-options="t for t in Topics"></select>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', []);
    app.controller('DemoCtrl', function($scope) {
        $scope.pName = "Guru99";

        $scope.Topics = ["Controller", "Models"];
        $scope.selectedTopic = $scope.Topics[0];
    });
</script>
</body>
</html>

Code Erläuterung:

  1. Das Texteingabefeld ist gebunden an pNameund das Select-Element ist gebunden an selectedTopicDa das Auswahlfeld über eine eigene Modelleigenschaft verfügt, wird die Liste selbst durch die Auswahl einer Option niemals beeinträchtigt.
  2. Das Topics Das Array enthält die beiden Werte „Controller“ und „Models“. ng-options Der Ausdruck durchläuft das Array und gibt für jeden Eintrag eine Option aus, sodass das Hinzufügen eines dritten Themas keine Änderung am Markup erfordert.
  3. selectedTopic ist auf den ersten Eintrag voreingestellt, wodurch sich das Dropdown-Menü mit einem sinnvollen Standardwert und nicht mit einer leeren Zeile öffnet.

Ausgang:

Aus der Ausgabe ist ersichtlich, dass der Wert, der dem zugewiesen wurde, pName Die Variable ist „Guru99”, und das Auswahlfeld bietet die Optionen „Controller“ und „Modelle“. Abgesehen von funktionierenden Beispielen kommt es vor, dass Bindungen sich nicht aktualisieren lassen, und die Gründe dafür sind es wert, bekannt zu sein.

Warum ng-model-Bindungen manchmal fehlschlagen

Die meisten gemeldeten Probleme mit ng-model sind keine Fehler in AngularJS, sondern Folgen der Funktionsweise von Scopes und Primitiven.

Der klassische Fall ist eine Bindung innerhalb einer Direktive, die einen untergeordneten Scope erzeugt, wie zum Beispiel ng-Wiederholung, ng-if oder ng-switch. Schreiben ng-model="name" Dadurch wird eine Schattenkopie im untergeordneten Gültigkeitsbereich erstellt, sodass der übergeordnete Gültigkeitsbereich die Änderung nie sieht. Stattdessen sollte man an eine Eigenschaft eines Objekts binden. ng-model="user.name" — sorgt dafür, dass alle Gültigkeitsbereiche auf dieselbe Referenz verweisen. Aus diesem Grund bestehen erfahrene AngularJS-Entwickler auf einem Punkt in jedem ng-model-Ausdruck.

Zwei weitere Ursachen sind für den größten Teil des Restes verantwortlich:

  • Fehlender Controller oder fehlendes Modul: Wenn ng-app oder ng-controller falsch geschrieben ist, wird durch die Bindung stillschweigend nichts gerendert, anstatt einen Fehler auszulösen.
  • Wertänderung außerhalb von AngularJS: Ein Wert, der von einem jQuery-Handler oder einem setTimeout-Callback gesetzt wird, landet außerhalb des Digest-Zyklus, sodass die Ansicht erst aktualisiert wird, wenn $scope.$apply() läuft.

Durch die Überprüfung dieser drei Punkte lassen sich die meisten Bindungen beheben, die scheinbar nicht funktionieren.

Häufig gestellte Fragen

ng-bind ist unidirektional: Es gibt einen Modellwert in ein Element aus. ng-model ist bidirektional und funktioniert nur mit Formularfeldern, sodass Benutzereingaben sowohl in das Modell zurückfließen als auch aus ihm heraus.

Fügen Sie ng-model-options hinzu, zum Beispiel ng-model-options="{ debounce: 500 }". AngularJS wartet dann nach dem letzten Tastendruck eine halbe Sekunde, bevor das Modell aktualisiert wird. Dies ist nützlich für Suchfelder, die eine Anfrage auslösen.

Im Großen und Ganzen ja. KI-Assistenten schreiben ng-model als [(ngModel)] um und fügen den Import von FormsModule hinzu. Reaktive Formulare, benutzerdefinierte Parser und $formatters-Pipelines müssen weiterhin manuell überprüft werden, da Angular sie sehr unterschiedlich modelliert.

KI-Tools prüfen schnell die üblichen Verdächtigen: eine primitive Bindung innerhalb eines Kind-Scopes, einen falsch geschriebenen Controller-Namen und einen Wert, der außerhalb des Digest-Zyklus zugewiesen wurde. Jeder dieser Fehler führt zu einer stillen Fehlermeldung anstatt eines Konsolenfehlers.

Nur Eingabefelder vom Typ „number“ werden in einen numerischen Wert umgewandelt. Eingabefelder vom Typ „text“ liefern immer einen String, daher schlagen Vergleiche mit === fehl. Konvertieren Sie die Werte explizit oder ändern Sie den Eingabetyp.

Fassen Sie diesen Beitrag mit folgenden Worten zusammen: