AngularJS- textareaDirektive
Beispiel
Ein Textbereich mit Datenbindung:
<textarea ng-model="myTextarea"></textarea>
<p>The value of the textarea field is:</p>
<h1>{{myTextarea}}</h1>
Definition und Verwendung
AngularJS ändert das Standardverhalten von <textarea>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 <textarea>Element mit einem requiredAttribut hat den $validZustand auf gesetzt,
falsesolange es leer ist.
Sie bieten auch staatliche Kontrolle. AngularJS enthält den aktuellen Status aller Textarea-Elemente.
Textarea-Felder haben die folgenden 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 true
entweder false.
Syntax
<textarea ng-model="name"></textarea>
Auf Textarea-Elemente wird über den Wert des ng-modelAttributs verwiesen.
CSS-Klassen
<textarea>Elemente innerhalb einer AngularJS-Anwendung erhalten bestimmte Klassen . Diese Klassen können verwendet werden, um Textarea-Elemente ihrem Zustand entsprechend zu stylen.
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 Textarea-Elemente an, indem Sie Standard-CSS verwenden:
<style>
textarea.ng-invalid {
background-color: pink;
}
textarea.ng-valid {
background-color: lightgreen;
}
</style>