AngularJS Input-Direktive

Definition und Verwendung

AngularJS ändert <input> Standardverhalten des Elements, vorausgesetzt, das Attribut ng-model existsiert.

Sie bieten Datenbindung, was bedeutet, dass sie Teil des AngularJS-Modells sind und in AngularJS-Funktionen und im DOM referenziert und aktualisiert werden können.

Sie bieten Validierung. Beispiel: mit required Eigenschaft <input> Elemente, solange sie leer sind, ihre $valid Zustand wird aufgesetzt false.

Sie bieten auch Zustandskontrolle. AngularJS speichert den aktuellen Zustand aller Eingabelemente.

Das Eingabefeld hat folgende Zustände:

• $untouched Dieses Feld wurde noch nicht berührt
• $touched Dieses Feld wurde berührt
• $pristine Dieses Feld wurde noch nicht geändert
• $dirty Dieses Feld wurde geändert
• $invalid Feldinhalt ungültig
• $valid Feldinhalt gültig

Der Wert jedes Zustands stellt einen Booleschen Wert dar, der true oder false.

Beispiel

Eingabefelder mit Datenbindung:

<input ng-model="myInput">
<p>Der Wert des Eingabefelds ist:</p>
<h1>{{myInput}}</h1>

Versuchen Sie es selbst

Syntax

<input ng-model="name">

Verwenden Sie ng-model der Wert der Eigenschaft wird verwendet, um auf das Eingabelement zu verweisen.

CSS-Klassen

Innerhalb der AngularJS-Anwendung <input> Das Element wird bestimmte Klassen zugewiesen. Diese Klassen können verwendet werden, um den Stil des Eingabeelements basierend auf seinem Zustand zu setzen.

Die folgenden Klassen wurden hinzugefügt:

• ng-untouched Dieses Feld wurde noch nicht berührt
• ng-touched Dieses Feld wurde berührt
• ng-pristine Dieses Feld wurde noch nicht geändert
• ng-dirty Dieses Feld wurde geändert
• ng-valid Feldinhalt gültig
• ng-invalid Feldinhalt ungültig
• ng-valid-key Überprüfen Sie每次一个密钥. Beispiel:ng-valid-requiredwird dies bei mehreren zu überprüfenden Ereignissen sehr nützlich sein
• ng-invalid-key Beispiel:ng-invalid-required

Wenn der Wert, der von der Klasse repräsentiert wird, falsedann werden diese Klassen entfernt.

Beispiel

Anwenden Sie Standard-CSS, um Stile für gültige und ungültige Eingabeelemente anzuwenden:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>

Versuchen Sie es selbst