Polecenie wejściowe AngularJS

Definicja i użycie

AngularJS modyfikuje <input> domyślne zachowanie elementu, pod warunkiem istnienia atrybutu ng-model.

One oferują wiązanie danych, co oznacza, że są częścią modelu AngularJS i można je odnosić do funkcji AngularJS oraz DOM i aktualizować je.

One oferują walidację. Przykład: z required atrybut <input> element, o ile jest pusty, jego $valid stan zostanie ustawiony false.

One również oferują kontrolę stanu. AngularJS zachowuje bieżący stan wszystkich elementów wejściowych.

Pole wejściowe ma następujące stany:

• $untouched To pole jeszcze nie zostało dotknięte
• $touched To pole zostało dotknięte
• $pristine Pole nie zostało zmienione
• $dirty Pole zostało zmienione
• $invalid Zawartość pola jest niewłaściwa
• $valid Zawartość pola jest poprawna

Każda wartość stanu reprezentuje wartość logiczną, dla true lub false.

Przykład

Pole wejściowe z wiązaniem danych:

<input ng-model="myInput">
<p>Wartość pola wejściowego to:</p>
<h1>{{myInput}}</h1>

Spróbuj sam

Gramatyka

<input ng-model="name">

używając ng-model wartości atrybutu do odniesienia do elementu wejściowego.

Klasy CSS

W aplikacji AngularJS <input> Element ma pewne klasy. Te klasy można używać do ustawiania stylu na podstawie stanu elementu wejściowego.

Dodano następujące klasy:

• ng-untouched To pole jeszcze nie zostało dotknięte
• ng-touched To pole zostało dotknięte
• ng-pristine Pole nie zostało zmienione
• ng-dirty Pole zostało zmienione
• ng-valid Zawartość pola jest poprawna
• ng-invalid Zawartość pola jest niewłaściwa
• ng-valid-key Weryfikuj każdy klucz raz. Na przykład:ng-valid-requiredjest bardzo użyteczny, gdy musi być weryfikowane więcej niż jedno coś
• ng-invalid-key Na przykład:ng-invalid-required

Jeśli wartość reprezentowana przez klasę to falsejeśli te klasy zostaną usunięte.

Przykład

Zastosuj style CSS do elementów wejściowych有效 i无效：

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>

Spróbuj sam