inputDyrektywa AngularJS
Przykład
Pole wejściowe z wiązaniem danych:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Definicja i użycie
AngularJS modyfikuje domyślne zachowanie <input>elementów, ale tylko wtedy, gdy ng-modelatrybut jest obecny.
Zapewniają wiązanie danych, co oznacza, że są częścią modelu AngularJS i można się do nich odwoływać i aktualizować zarówno w funkcjach AngularJS, jak iw DOM.
Zapewniają walidację. Przykład: <input>element z requiredatrybutem ma $validustawiony stan
falsetak długo, jak jest pusty.
Zapewniają również kontrolę państwa. AngularJS przechowuje aktualny stan wszystkich elementów wejściowych.
Pola wejściowe mają następujące stany:
$untouchedPole nie zostało jeszcze dotknięte$touchedPole zostało dotknięte$pristinePole nie zostało jeszcze zmodyfikowane$dirtyPole zostało zmodyfikowane$invalidZawartość pola jest nieprawidłowa$validZawartość pola jest prawidłowa
Wartość każdego stanu reprezentuje wartość logiczną i jest albo true
lub false.
Składnia
<input ng-model="name">
Do elementów wejściowych odwołuje się wartość ng-modelatrybutu.
Klasy CSS
<input>elementy wewnątrz aplikacji AngularJS mają określone klasy . Te klasy mogą służyć do stylizowania elementów wejściowych zgodnie z ich stanem.
Dodaje się następujące klasy:
ng-untouchedPole nie zostało jeszcze dotknięteng-touchedPole zostało dotknięteng-pristinePole nie zostało jeszcze zmodyfikowaneng-dirtyPole zostało zmodyfikowaneng-validZawartość pola jest prawidłowang-invalidZawartość pola jest nieprawidłowang-valid-keyJeden klucz do każdej walidacji. Przykład:ng-valid-required, przydatne, gdy istnieje więcej niż jedna rzecz, która musi zostać zweryfikowanang-invalid-keyPrzykład:ng-invalid-required
Klasy są usuwane, jeśli reprezentowana przez nie wartość to false.
Przykład
Zastosuj style dla prawidłowych i nieprawidłowych elementów wejściowych, używając standardowego CSS:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>