Exemplu
Un câmp de introducere de date cu caracter obligatoriu:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Încearcă - l singur » Definiție și utilizare
AngularJS modifică comportamentul implicit al <input> elemente, dar numai în cazul ng-model atribut este prezent.
Acestea furnizează date de legare, ceea ce înseamnă că fac parte din modelul AngularJS, și pot fi menționate și actualizate, atât în funcțiile AngularJS și în DOM.
Ele oferă de validare. Exemplu: un <input> Element cu un required atribut, are $valid starea setat la false , atâta timp cât acesta este gol.
Acestea oferă, de asemenea, controlul de stat. AngularJS deține starea actuală a tuturor elementelor de intrare.
Câmpurile de introducere au următoarele stări:
-
$untouchedCâmpul nu a fost încă atins -
$touchedCâmpul a fost atins -
$pristineCâmpul nu a fost încă modificat -
$dirtyCâmpul a fost modificat -
$invalidConținutul câmp nu este valid -
$validConținutul de câmp este valabil
Valoarea fiecărui stat reprezintă o valoare booleană, și este fie true sau false .
Sintaxă
<input ng-model=" name "> Elementele de intrare sunt menționate prin utilizarea valorii ng-model atribut.
clasele CSS
<input> elemente din interiorul unei aplicații AngularJS sunt date anumite clase. Aceste clase pot fi folosite pentru elementele de stil de intrare în funcție de starea lor.
Se adaugă următoarele clase:
-
ng-untouchedCâmpul nu a fost încă atins -
ng-touchedCâmpul a fost atins -
ng-pristineCâmpul nu a fost încă modificat -
ng-dirtyCâmpul a fost modificat -
ng-validConținutul de câmp este valabil -
ng-invalidConținutul câmp nu este valid -
ng-valid- keyO cheie pentru fiecare validare. Exemplu:ng-valid-required, utilă atunci când există mai mult de un lucru care trebuie să fie validate -
ng-invalid- keyExemplu:ng-invalid-required
Clasele sunt eliminate în cazul în care valoarea pe care o reprezintă este false .
Exemplu
Se aplică stiluri pentru elementele de intrare valide și invalide, folosind CSS standard:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
Încearcă - l singur »