Najnowsze tutoriale tworzenie stron internetowych
 

AngularJS dyrektywa wejście

❮ angularjs referencyjny

Przykład

Pole wejściowe z wiązania danych:

<input ng-model="myInput">

<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Spróbuj sam "

Definicja i Wykorzystanie

Angularjs modyfikuje domyślne zachowanie <input> elementów, ale tylko wtedy, gdy ng-model atrybut jest obecny.

Zapewniają one wiązania danych, co oznacza, że ​​jest częścią modelu angularjs i może być określone i aktualizowane, zarówno w funkcji angularjs i DOM.

Zapewniają one walidacji. Przykład: <input> element z required atrybutu, ma $valid stan ustawiony na false , o ile jest on pusty.

Zapewniają one również kontrolę państwa. Angularjs utrzymuje bieżący stan wszystkich elementów wejściowych.

Pola wejściowe mają następujące stany:

  • $untouched pole nie zostało jeszcze dotknął
  • $touched Pole zostało dotknięte
  • $pristine Pole nie zostało jeszcze zmienione
  • $dirty Pole została zmodyfikowana
  • $invalid Zawartość pola nie jest ważny
  • $valid Zawartość pola jest ważna

Wartość każdego stanu reprezentuje wartość logiczną, i jest albo true albo false .

Składnia

<input ng-model=" name ">

Elementy napędowe są określone przy użyciu wartości ng-model atrybutu.

Klasy CSS

<input> elementy wewn? trz angularjs stosowania podane są pewne klasy. Klasy te mogą być stosowane do stylu elementów wejściowych w zależności od ich stanu.

Poniższe klasy w brzmieniu:

  • ng-untouched Pole nie zostało jeszcze dotknął
  • ng-touched Pole zostało dotknięte
  • ng-pristine Pole nie zostało jeszcze zmienione
  • ng-dirty Pole została zmodyfikowana
  • ng-valid Zawartość pola jest ważna
  • ng-invalid Zawartość pola nie jest ważna
  • ng-valid- key jeden klucz dla każdej walidacji. Przykład: ng-valid-required , przydatna, gdy istnieje więcej niż jedna rzecz, która musi być potwierdzona
  • ng-invalid- key Przykład: ng-invalid-required

Klasy są usuwane, jeśli wartość reprezentują jest false .

Przykład

Zastosuj style prawidłowe i nieprawidłowe elementów wejściowych, przy użyciu standardowego CSS:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>
Spróbuj sam "
❮ angularjs referencyjny