Was ist ng-model in AngularJs?
ng-model ist eine Direktive in Angular.JS, die Modelle darstellt und deren Hauptzweck darin besteht, die "Ansicht" an das "Modell" zu binden.
Angenommen, Sie möchten dem Endbenutzer eine einfache Seite wie die unten gezeigte präsentieren, auf der der Benutzer aufgefordert wird, den "Vornamen" und den "Nachnamen" in die Textfelder einzugeben. Und dann wollten Sie sicherstellen, dass Sie die Informationen speichern, die der Benutzer in Ihr Datenmodell eingegeben hat.
Mit der Direktive ng-model können Sie die Textfeldfelder "Vorname" und "Nachname" Ihrem Datenmodell zuordnen.
Die ng-model-Direktive stellt sicher, dass die Daten in der "Ansicht" und die Ihres "Modells" die ganze Zeit synchron bleiben.
In diesem Tutorial lernen Sie:
- Das Attribut ng-model
- Wie man ng-model benutzt
- Textbereich
- Eingabeelemente
- Element aus Dropdown-Liste auswählen
Das ng-Modellattribut
Wie in der Einführung zu diesem Kapitel erläutert, wird das Attribut ng-model verwendet, um die Daten in Ihrem Modell an die dem Benutzer präsentierte Ansicht zu binden.
Das Attribut ng-model wird verwendet für:
- Bindungssteuerelemente wie Eingabe, Textbereich und Auswahl in der Ansicht in das Modell.
- Bereitstellen eines Validierungsverhaltens - Beispielsweise kann einem Textfeld eine Validierung hinzugefügt werden, bei der nur numerische Zeichen in das Textfeld eingegeben werden können.
- Das Attribut ng-model behält den Status des Steuerelements bei (Mit Status meinen wir, dass das Steuerelement und die Daten immer synchron gehalten werden müssen. Wenn sich der Wert unserer Daten ändert, ändert sich automatisch der Wert im Steuerelement und und umgekehrt)
Wie man ng-model benutzt
1) Textbereich
Das Textbereichstag wird verwendet, um ein mehrzeiliges Texteingabesteuerelement zu definieren. Der Textbereich kann eine unbegrenzte Anzahl von Zeichen enthalten, und der Text wird in einer Schriftart mit fester Breite gerendert.
Schauen wir uns nun ein einfaches Beispiel an, wie wir die ng-model-Direktive einem Textbereichssteuerelement hinzufügen können.
In diesem Beispiel möchten wir zeigen, wie wir eine mehrzeilige Zeichenfolge vom Controller an die Ansicht übergeben und diesen Wert an das Textbereichssteuerelement anhängen können.
Event Registration Guru99 Global Event
Code Erläuterung:
- Die Direktive ng-model wird verwendet, um die Mitgliedsvariable "pDescription" an das Steuerelement "textarea" anzuhängen.
Die Variable "pDescription" enthält tatsächlich den Text, der an das Textbereichssteuerelement weitergeleitet wird. Wir haben auch 2 Attribute für das Textbereichssteuerelement erwähnt, nämlich Zeilen = 4 und Spalten = 50. Diese Attribute wurden erwähnt, damit wir mehrere Textzeilen anzeigen können. Durch die Definition dieser Attribute verfügt der Textbereich nun über 4 Zeilen und 50 Spalten, sodass mehrere Textzeilen angezeigt werden können.
- Hier hängen wir die Mitgliedsvariable an das Bereichsobjekt "pDescription" an und fügen der Variablen einen Zeichenfolgenwert hinzu.
- Beachten Sie, dass wir das / n-Literal in die Zeichenfolge einfügen, sodass der Text aus mehreren Zeilen bestehen kann, wenn er im Textbereich angezeigt wird. Das / n-Literal teilt den Text in mehrere Zeilen auf, sodass er im Textbereichssteuerelement als mehrere Textzeilen gerendert werden kann.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie den Code im Browser ausführen.
Ausgabe:
Aus der Ausgabe
- Es ist deutlich zu erkennen, dass der Wert, der der Variablen pDescription als Teil des Bereichsobjekts zugewiesen wurde, an das Textarea-Steuerelement übergeben wurde.
- Anschließend wurde es beim Laden der Seite angezeigt.
2) Eingabeelemente
Die Direktive ng-model kann auch auf Eingabeelemente wie Textfelder, Kontrollkästchen, Optionsfelder usw. angewendet werden.
Schauen wir uns ein Beispiel an, wie wir das ng-Modell mit den Eingabetypen "textbox" und "checkbox" verwenden können.
Hier haben wir einen Texteingabetyp, der den Namen "Guru99" hat, und es gibt 2 Kontrollkästchen, von denen eines standardmäßig markiert ist und das andere nicht markiert ist.
Event Registration Guru99 Global Event
Code Erläuterung:
- Die Direktive ng-model wird verwendet, um die Mitgliedsvariable "pname" an das Textsteuerelement des Eingabetyps anzuhängen. Die Variable "pname" enthält den Text von "Guru99", der an das Texteingabesteuerelement weitergeleitet wird. Beachten Sie, dass dem Namen der Mitgliedsvariablen ein beliebiger Name zugewiesen werden kann.
- Hier definieren wir unser erstes Kontrollkästchen "Controller", das an die Mitgliedsvariable Topics.Controllers angehängt ist. Das Kontrollkästchen wird für diese Kontrollsteuerung markiert.
- Hier definieren wir unser erstes Kontrollkästchen "Modelle", das an die Mitgliedsvariable Topics.Models angehängt ist. Das Kontrollkästchen wird für diese Kontrollsteuerung nicht markiert.
- Hier fügen wir die Mitgliedsvariable "pName" hinzu und setzen den String-Wert "Guru99".
- Wir deklarieren eine Member-Array-Variable namens "Topics" und geben ihr zwei Werte, der erste ist "true" und der zweite ist "false".
Wenn das erste Kontrollkästchen den Wert true erhält, wird das Kontrollkästchen für dieses Steuerelement markiert. Da der zweite Wert false ist, wird das Kontrollkästchen für dieses Steuerelement ebenfalls nicht markiert.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Aus der Ausgabe,
- Es ist deutlich zu erkennen, dass der der Variablen pName zugewiesene Wert "Guru99" ist.
- Da der erste übergebene Prüfwert "true" ist, ist das Kontrollkästchen für das Kontrollkästchen "Controller" markiert. Da der zweite Wert falsch ist, ist das Kontrollkästchen für das Kontrollkästchen "Modelle" nicht markiert.
3) Wählen Sie das Element aus der Dropdown-Liste aus
Die Direktive ng-model kann auch auf das Auswahlelement angewendet und zum Auffüllen der Listenelemente in der Auswahlliste verwendet werden.
Schauen wir uns ein Beispiel an, wie wir das ng-Modell mit dem ausgewählten Eingabetyp verwenden können.
Hier haben wir einen Texteingabetyp, der den Namen "Guru99" hat, und es wird eine Auswahlliste mit 2 Listenelementen "Controller" und "Models" geben.
Event Registration Guru99 Global Event
- Die Direktive ng-model wird verwendet, um die Mitgliedsvariable "Topics" an das Steuerelement für den ausgewählten Typ anzuhängen. Innerhalb des Auswahlsteuerelements fügen wir für jede der Optionen die Mitgliedsvariable Topics.option1 für die erste Option und Topics.option2 für die zweite Option hinzu.
- Hier definieren wir unsere Topics-Array-Variable, die 2 Schlüssel-Wert-Paare enthält. Das erste Paar hat den Wert "Controller" und das zweite den Wert "Modelle". Diese Werte werden übergeben, um das Eingabe-Tag in der Ansicht auszuwählen.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt.
Ausgabe:
Aus der Ausgabe ist ersichtlich, dass der der Variablen pName zugewiesene Wert "Guru99" ist, und wir können sehen, dass das ausgewählte Eingabesteuerelement die Optionen "Controller" und "Modelle" hat.
Zusammenfassung
- Modelle in Angular JS werden durch die ng-model-Direktive dargestellt. Der Hauptzweck dieser Anweisung besteht darin, die Ansicht an das Modell zu binden. So erstellen Sie einen einfachen Controller mithilfe der Anweisungen ng-app, ng-controller und ng-model.
- Die Direktive ng-model kann mit einem Eingabesteuerelement "Textbereich" verknüpft werden, und mehrzeilige Zeichenfolgen können vom Controller an die Ansicht übergeben werden.
- Die Direktive ng-model kann mit Eingabesteuerelementen wie den Text- und Kontrollkästchensteuerelementen verknüpft werden, um sie zur Laufzeit dynamischer zu gestalten.
- Die Direktive ng-model kann auch verwendet werden, um eine Auswahlliste mit Optionen zu füllen, die dem Benutzer angezeigt werden können.