AngularJS - Intrări în formulare

Gestionarea datelor din formular

În aplicațiile web, cel mai natural mod de a obține date de utilizator este prin intermediul formularelor, cu acestea putem crea elemente care captează text sau confirmări simple, cum ar fi casetele de selectare, dar toate acestea pot fi traduse ca date de utilizator, cu ele putem face diferite prelucrări.
În AngularJS Lucrul cu aceste date de intrare este foarte simplu, deoarece datorită modului în care a fost proiectată biblioteca, putem transforma o parte din aceste date pe care le primim în acțiuni în aplicația noastră, fie pentru a face calcule, fie pentru a defini comportamentul acesteia.
În această secțiune vom vedea un pic mai multe despre cum să gestionați intrarea în formulare folosind AngularJS.
Cum functioneazã?Modul în care putem face uniunea dintre elementele de intrare și logica noastră AngularJS este foarte simplu, trebuie să folosim proprietatea ng-model și totul va avea un fel de relație, astfel încât valoarea a ceea ce intrăm prin formă poate fi manipulată AngularJS, acest lucru se poate aplica la text de intrare, butoane radio, casetă de selectare etc.
Să vedem mai jos un mic exemplu din ceea ce explicăm:

Ceea ce se întâmplă aici este că în domeniul de aplicare al Controlorul nostru putem manipula ceea ce face utilizatorul în casetă de selectare marker, atunci dacă utilizatorul îl marchează, vom primi imediat marcator ca adevărat și dacă îl debifați, vom avea răspunsul opus.
Putem merge puțin mai departe și ne putem instala Controlorul nostru acea marcator este marcat în mod implicit, atunci când utilizatorul vede pagina pentru prima dată, caseta de selectare va fi marcată.
Adăugați acțiuni
Dar nu numai în captarea datelor trebuie să rămânem, putem și trebuie să includem acțiuni odată ce primim intrările, în AngularJS Putem apela funcții și metode care sunt executate într-un eveniment al elementului nostru de intrare, de exemplu, vom face un mic calculator care ia estimarea investiției pentru a face o întreprindere, ceea ce vom face este să înmulțim valoarea primită cu 10, să vedea:
1- Mai întâi trebuie să stabilim elementele HTML pe care le vom folosi, ca în exemplul anterior vom crea un controler și intrarea va face parte din modelul nostru:

MARI

2- Vedem că am introdus o nouă proprietate ng-schimbare și am atribuit apelul unei funcții numite calculoInversion () Aceasta înseamnă că de fiecare dată când câmpul nostru de intrare se schimbă, funcția va fi numită, așa cum putem vedea, este ceva foarte simplu.
3- Acum vom construi codul cu AngularJS care va da viață ceea ce am văzut:

4- Construim controlerul adecvat, apoi indicăm o valoare inițială pentru model, în acest caz o echivalăm cu 0, aceasta include ambele elemente atât Inițială estimată Ce necesar, apoi creăm funcția calculoInversion () Vedem că o facem în așa-numitul scop al controlerului nostru, în acest fel este asociat cu elementul nostru. Cu aceasta aplicația noastră ar trebui să funcționeze la un nivel de bază.
Desigur, acest exemplu lipsește mai multe validări și ia în considerare numai atunci când utilizatorul modifică valoarea textului introdus, dar servește ca o introducere pentru a include acțiuni în aplicațiile noastre scrise cu AngularJS.
Anteriorpagina 1 din 2Următorul