Ce este ng-model în AngularJs?
ng-model este o directivă în Angular.JS care reprezintă modele și scopul său principal este de a lega „vizualizarea” de „modelul”.
De exemplu, să presupunem că doriți să prezentați o pagină simplă utilizatorului final, cum ar fi cea de mai jos, care îi cere utilizatorului să introducă „Numele” și „Numele de familie” în casetele de text. Și apoi ați dorit să vă asigurați că stocați informațiile pe care utilizatorul le-a introdus în modelul dvs. de date.
Puteți utiliza directiva ng-model pentru a mapa câmpurile din caseta de text „Prenume” și „Nume” la modelul dvs. de date.
Directiva ng-model va asigura că datele din „vizualizare” și cea din „modelul” dvs. sunt păstrate sincronizate tot timpul.
În acest tutorial, veți învăța-
- Atributul ng-model
- Cum se folosește modelul ng
- Zona de text
- Elemente de intrare
- Selectați formularul dropdown
Atributul modelului ng
După cum sa discutat în introducerea acestui capitol, atributul ng-model este utilizat pentru a lega datele din modelul dvs. de vizualizarea prezentată utilizatorului.
Atributul ng-model este folosit pentru,
- Comenzile de legare, cum ar fi intrarea, zona de text și selectează în vizualizare în model.
- Oferiți un comportament de validare - de exemplu, o validare poate fi adăugată la o casetă de text pentru a putea fi introduse numai caractere numerice în caseta de text.
- Atributul ng-model menține starea controlului (Prin stare, înseamnă că controlul și datele sunt obligate să fie păstrate întotdeauna sincronizate. Dacă valoarea datelor noastre se schimbă, va schimba automat valoarea din control și viceversa)
Cum se folosește modelul ng
1) Zona de text
Eticheta de zonă de text este utilizată pentru a defini un control de introducere a textului pe mai multe linii. Zona textului poate conține un număr nelimitat de caractere, iar textul se redă într-un font cu lățime fixă.
Deci, acum să ne uităm la un exemplu simplu de cum putem adăuga directiva ng-model la un control al zonei de text.
În acest exemplu, vrem să arătăm cum putem trece un șir multiliniu de la controler la vizualizare și să atașăm acea valoare controlului zonei de text.
Event Registration Guru99 Global Event
Explicatie cod:
- Directiva ng model este utilizat pentru a atașa variabila membru numit „pDescription“ la control „textarea“.
Variabila „pDescriere” va conține de fapt textul, care va fi transmis controlului zonei de text. De asemenea, am menționat 2 atribute pentru controlul textarea care este rândurile = 4 și cols = 50. Aceste atribute au fost menționate astfel încât să putem afișa mai multe linii de text. Prin definirea acestor atribute, textarea va avea acum 4 rânduri și 50 de coloane, astfel încât să poată afișa mai multe linii de text.
- Aici atașăm variabila membru obiectului scop numit „pDescription” și punem o valoare șir variabilei.
- Rețineți că introducem literalul / n în șir, astfel încât textul să poată avea mai multe linii atunci când este afișat în zona de text. Literalul / n împarte textul în mai multe linii, astfel încât să poată fi redat în controlul textului ca mai multe linii de text.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din ieșire
- Se poate vedea clar că valoarea atribuită variabilei pDescription ca parte a obiectului scop a fost transmisă controlului textarea.
- Ulterior, a fost afișat la încărcarea paginii.
2) Elemente de intrare
Directiva ng-model poate fi aplicată și elementelor de intrare precum caseta de text, casetele de selectare, butoanele radio etc.
Să vedem un exemplu despre modul în care putem folosi modelul ng cu tipul de intrare „casetă text” și „casetă de selectare”.
Aici vom avea un tip de introducere a textului care va avea numele de „Guru99” și vor exista 2 casete de selectare, una care va fi marcată implicit și cealaltă nu va fi marcată.
Event Registration Guru99 Global Event
Explicatie cod:
- Directiva ng model este utilizat pentru a atașa variabila membru numit „pname“ la textul de control de tip intrare. Variabila „pname” va conține textul „Guru99” care va fi transmis controlului de introducere a textului. Rețineți că orice nume poate fi dat numelui variabilei membre.
- Aici definim prima noastră casetă de selectare „Controlere” care este atașată la variabila membră Topics.Controllers. Caseta de selectare va fi marcată pentru acest control de verificare.
- Aici definim prima noastră casetă de selectare „Modele” care este atașată variabilei membre Topics.Models. Caseta de selectare nu va fi marcată pentru acest control de verificare.
- Aici atașăm variabila membru numită „pName” și punem o valoare șir „Guru99”.
- Declarăm o variabilă matrice de membri numită „Subiecte” și îi oferim două valori, prima este „adevărată” și a doua este „falsă”.
Deci, atunci când prima casetă de selectare obține valoarea true, caseta de selectare va fi marcată pentru acest control și, de asemenea, deoarece a doua valoare este falsă, caseta de selectare nu va fi marcată pentru acest control.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Din ieșire,
- Se poate vedea clar că valoarea atribuită variabilei pName este "Guru99"
- Deoarece prima valoare de verificare este „adevărată” a trecut, caseta de selectare este marcată pentru caseta de selectare „Controlere”. De asemenea, deoarece a doua valoare este falsă, caseta de selectare nu este marcată pentru caseta de selectare „Modele”.
3) Selectați formularul dropdown
Directiva ng-model poate fi, de asemenea, aplicată elementului select și poate fi utilizată pentru a completa elementele listei din lista selectată.
Să vedem un exemplu despre modul în care putem folosi modelul ng cu tipul de intrare selectat.
Aici vom avea un tip de introducere a textului care va avea numele de „Guru99” și va exista o listă selectată cu 2 elemente de listă „Controler” și „Modele”.
Event Registration Guru99 Global Event
- Directiva ng model este utilizat pentru a atașa variabila membru numit „Subiecte“ să selectați controlul de tip. În interiorul controlului de selectare, pentru fiecare dintre opțiuni, atașăm variabila membru Topics.option1 pentru prima opțiune și Topics.option2 pentru a doua opțiune.
- Aici definim variabila matricei Subiecte care conține 2 perechi cheie-valoare. Prima pereche are valoarea „Controlere” și a doua are valoarea „Modele”. Aceste valori vor fi trecute pentru a selecta eticheta de intrare în vizualizare.
Dacă codul este executat cu succes, va fi afișată următoarea ieșire.
Ieșire:
Din ieșire, se poate observa că valoarea atribuită variabilei pName este „Guru99” și putem vedea că controlul de intrare selectat are opțiunile „Controlere” și „Modele”.
rezumat
- Modelele din Angular JS sunt reprezentate de directiva ng-model. Scopul principal al acestei directive este de a lega viziunea de model. Cum se construiește un controler simplu folosind directivele ng-app, ng-controller și ng-model.
- Directiva ng-model poate fi legată de un control de intrare „zonă de text” și șirurile multiliniu pot fi transmise de la controler la vizualizare.
- Directiva ng-model poate fi legată de controale de intrare precum textul și controalele casetei de selectare pentru a le face mai dinamice în timpul rulării.
- Directiva ng-model poate fi, de asemenea, utilizată pentru a completa o listă selectată cu opțiuni care pot fi afișate utilizatorului.