Neueste Web-Entwicklung Tutorials
 

AngularJS Eingangs Richtlinie

❮ AngularJS Referenz

Beispiel

Ein Eingabefeld mit Datenbindung:

<input ng-model="myInput">

<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Versuch es selber "

Definition und Verwendung

AngularJS ändert das Standardverhalten von <input> Elemente, aber nur , wenn die ng-model Attribut vorhanden ist.

Sie bieten Datenbindung, was bedeutet, sie Teil des AngularJS Modells sind und bezeichnet werden kann, und aktualisiert werden, sowohl in AngularJS Funktionen und in dem DOM.

Sie bieten Validierung. Beispiel: ein <input> Element mit einem required Attribut, hat die $valid Zustand gesetzt false , solange es leer ist.

Sie bieten auch die staatliche Kontrolle. AngularJS hält den aktuellen Status aller Eingabeelemente.

Eingabefelder haben folgende Staaten:

  • $untouched das Feld nicht berührt wurde noch
  • $touched Das Feld berührt wurde
  • $pristine Das Feld wurde noch nicht geändert
  • $dirty Das Feld wurde geändert
  • $invalid Der Feldinhalt nicht gültig ist
  • $valid Der Feldinhalt ist gültig

Der Wert eines jeden Staates repräsentiert einen Booleschen Wert, und ist entweder true oder false .

Syntax

<input ng-model=" name ">

Eingabeelemente bezeichnet werden durch den Wert der Verwendung von ng-model - Attribut.

CSS-Klassen

<input> Elemente innerhalb einer AngularJS Anwendung sind bestimmte Klassen gegeben. Diese Klassen können verwendet werden, um Eingabeelemente zu gestalten, je nach Zustand.

Folgende Klassen werden hinzugefügt:

  • ng-untouched Das Feld wurde bisher noch nicht berührt
  • ng-touched Das Feld berührt wurde
  • ng-pristine Das Feld wurde noch nicht geändert
  • ng-dirty Das Feld geändert wurde
  • ng-valid Der Feldinhalt ist gültig
  • ng-invalid Der Feldinhalt nicht gültig
  • ng-valid- key Ein Schlüssel für jede Validierung. Beispiel: ng-valid-required , nützlich , wenn es mehr als eine Sache gibt , die überprüft werden müssen
  • ng-invalid- key Beispiel: ng-invalid-required

Die Klassen entfernt werden , wenn der Wert , den sie vertreten , ist false .

Beispiel

Anwenden von Stilen für gültige und ungültige Eingabeelemente unter Verwendung von Standard CSS:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>
Versuch es selber "
❮ AngularJS Referenz