AngularJS- inputDirektive
Beispiel
Ein Eingabefeld mit Datenbindung:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Definition und Verwendung
AngularJS ändert das Standardverhalten von <input>Elementen, aber nur, wenn das ng-modelAttribut vorhanden ist.
Sie bieten Datenbindung, was bedeutet, dass sie Teil des AngularJS-Modells sind und sowohl in AngularJS-Funktionen als auch im DOM referenziert und aktualisiert werden können.
Sie geben Bestätigung. Beispiel: Ein <input>Element mit einem requiredAttribut hat den $validZustand auf gesetzt,
falsesolange es leer ist.
Sie bieten auch staatliche Kontrolle. AngularJS hält den aktuellen Zustand aller Eingabeelemente.
Eingabefelder haben folgende Zustände:
$untouchedDas Feld wurde noch nicht berührt$touchedDas Feld wurde berührt$pristineDas Feld wurde noch nicht geändert$dirtyDas Feld wurde geändert$invalidDer Feldinhalt ist ungültig$validDer Feldinhalt ist gültig
Der Wert jedes Zustands stellt einen booleschen Wert dar und ist entweder true
oder false.
Syntax
<input ng-model="name">
Auf Eingabeelemente wird über den Wert des ng-modelAttributs verwiesen.
CSS-Klassen
<input>Elemente innerhalb einer AngularJS-Anwendung erhalten bestimmte Klassen . Diese Klassen können verwendet werden, um Eingabeelemente entsprechend ihrem Status zu formatieren.
Folgende Klassen kommen hinzu:
ng-untouchedDas Feld wurde noch nicht berührtng-touchedDas Feld wurde berührtng-pristineDas Feld wurde noch nicht geändertng-dirtyDas Feld wurde geändertng-validDer Feldinhalt ist gültigng-invalidDer Feldinhalt ist ungültigng-valid-keyEin Schlüssel für jede Validierung. Beispiel:ng-valid-required, nützlich, wenn mehr als eine Sache validiert werden mussng-invalid-keyBeispiel:ng-invalid-required
Die Klassen werden entfernt, wenn der Wert, den sie darstellen, false.
Beispiel
Wenden Sie Stile für gültige und ungültige Eingabeelemente an, indem Sie Standard-CSS verwenden:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>