Najnowsze tutoriale tworzenie stron internetowych
 

AngularJS dyrektywa textarea

❮ angularjs referencyjny

Przykład

Textarea z wiązania danych:

<textarea ng-model="myTextarea"></textarea>

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

Definicja i Wykorzystanie

Angularjs modyfikuje domyślne zachowanie <textarea> 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: <textarea> elementu z required atrybutem, 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 tekstowym.

pola textarea 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 od false .

Składnia

<textarea ng-model=" name "></textarea>

Textarea są elementy, o których mowa stosując wartość ng-model atrybutu.

Klasy CSS

<textarea> elementy wewn? trz angularjs stosowania podane są pewne klasy. Klasy te mogą być stosowane do elementów stylu obszarów tekstowych według 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 elementy textarea, używając standardowego CSS:

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