Cum să utilizați „ng-model” în AngularJS cu EXEMPLE
James Hartman
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 „model”.
De exemplu, să presupunem că doriți să prezentați utilizatorului final o pagină simplă, precum cea prezentată mai jos, care îi cere utilizatorului să introducă „Prenumele” și „Numele” în casetele de text. Și apoi ați vrut 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 casetei de text ale „Prenume” și „Nume” la modelul dvs. de date.
Directiva ng-model se va asigura că datele din „vizualizare” și cele ale „modelului” dvs. sunt păstrate sincronizate tot timpul.
Atributul ng-model
După cum sa discutat în introducerea acestui capitol, atributul ng-model este folosit pentru a lega datele din modelul dumneavoastră la vizualizarea prezentată utilizatorului.
Atributul ng-model este folosit pentru,
- Legarea controalelor, cum ar fi intrarea, zona de text și selectările din vizualizarea în model.
- Furnizați un comportament de validare – de exemplu, o validare poate fi adăugată la o casetă de text în care pot fi introduse numai caractere numerice în caseta de text.
- Atributul ng-model menține starea controlului (Prin stare, ne referim la faptul că controlul și datele trebuie să fie întotdeauna sincronizate. Dacă valoarea datelor noastre se schimbă, aceasta va schimba automat valoarea din control și viceversa)
Cum se utilizează ng-model
1) Zona de text
Eticheta zonă de text este utilizată pentru a defini un control de introducere a textului pe mai multe linii. Zona de text poate conține un număr nelimitat de caractere, iar textul este redat într-un font cu lățime fixă.
Deci, acum să ne uităm la un exemplu simplu despre cum putem adăuga directiva ng-model la un control de zonă de text.
În acest exemplu, dorim să arătăm cum putem trece un șir cu mai multe linii de la controler la vizualizare și să atașăm acea valoare la controlul zonei de text.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
<textarea rows="4" cols="50" ng-model="pDescription"></textarea><br><br>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pDescription="This topic looks at how Angular JS works \nModels in Angular JS"});
</script>
</body>
</html>
Explicația codului:
- directiva ng-model este folosit pentru a atașa variabila membru numită „pDescription” la controlul „textarea”.Descriptvariabila ion” va conține de fapt textul, care va fi transmis controlului zonei de text. Am menționat și 2 atribute pentru controlul textarea care este rows=4 și cols=50. Aceste atribute au fost menționate astfel încât să putem afișa mai multe rânduri de text. Prin definirea acestor atribute, zona textului va avea acum 4 rânduri și 50 de coloane, astfel încât să poată afișa mai multe rânduri de text.
- Aici atașăm variabila membru la obiectul scope numit „pDescription” și punând o valoare șir variabilei.
- Rețineți că punem 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 zonei de text ca mai multe linii de text.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
ieșire:
Din ieșire,
- Se poate observa clar că valoarea atribuită pDescriptvariabila ion ca parte a obiectului scop a fost transmisă controlului textarea.
- Ulterior, a fost afișat când pagina este încărcată.
2) Elemente de intrare
Directiva ng-model poate fi aplicată și elementelor de intrare, cum ar fi caseta de text, casetele de selectare, butoanele radio etc.
Să ne uităm la un exemplu despre cum putem folosi modelul ng cu tipul de intrare „textbox” și „checkbox”.
Aici vom avea un tip de introducere a textului care va avea numele „Guru99” și vor fi 2 casete de selectare, una care va fi marcată implicit, iar cealaltă nu va fi marcată.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
Name : <input type="text" ng-model="pname"><br>
Topic : <br>
<input type="checkbox" ng-model="Topic.Controller">Controller<br>
<input type="checkbox" ng-model="Topic.Models">Models
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pname="Guru99";
$scope.Topic =
{
Controller:true,
Models:false
}; });
</script>
</body>
</html>
Explicația codului:
- directiva ng-model este folosit pentru a atașa variabila membru numită „pname” la controlul text al tipului de 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 membru.
- Aici definim prima noastră casetă de selectare „Controllere” care este atașată variabilei membre Topics.Controllers. Caseta de selectare va fi bifată 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 bifată pentru acest control de verificare.
- Aici atașăm variabila membru numită „pName” și punem o valoare șir de „Guru99”.
- Declarăm o variabilă matrice de membri numită „Subiecte” și îi dăm două valori, prima este „adevărat”, iar a doua este „fals”. Deci, atunci când prima casetă de selectare primește 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 bifată pentru acest control.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.
ieșire:
Din ieșire,
- Se poate observa clar că valoarea atribuită variabilei pName este „Guru99”
- Deoarece prima valoare de verificare este „adevărată”, caseta de selectare este bifată pentru caseta de selectare „Controllere”. La fel, deoarece a doua valoare este falsă, caseta de selectare nu este bifată pentru caseta de selectare „Modele”.
3) Selectați elementul din meniul drop-down
Directiva ng-model poate fi, de asemenea, aplicată la elementul select și poate fi utilizată pentru a popula elementele listei din lista de selectare.
Să ne uităm la un exemplu despre cum putem folosi modelul ng cu tipul de intrare selectat.
Aici vom avea un tip de introducere a textului care va avea numele „Guru99” și va exista o listă de selectare cu 2 elemente din listă „Controller” și „Modele”.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
Name : <input type="text" ng-model="pName" value="Guru99"><br>
Topic : <br>
<select ng-model="Topics">
<option>{{Topics.option1}}</option>
<option>{{Topics.option2}}</option>
</select>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pName="Guru99";
$scope.Topics =
{
option1 : "Controller",
option2 : "Module"
}; });
</script>
</body>
</html>
- directiva ng-model este folosit pentru a atașa variabila membru numită „Subiecte” la controlul tip selectat. În interiorul controlului select, 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 noastră matrice Topics care deține 2 perechi cheie-valoare. Prima pereche are valoarea „Controllere”, iar a doua are valoarea „Modele”. Aceste valori vor fi transmise 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 selectare a intrării are opțiunile „Controllere” și „Modele”.
Rezumat
- Modelele din Angular JS sunt reprezentate de directiva ng-model. Scopul principal al acestei directive este de a lega punctul de vedere de model. Cum să construiți un controler simplu folosind directivele ng-app, ng-controller și ng-model.
- Directiva ng-model poate fi legată de un control de intrare „zonă text” și șirurile de mai multe linii pot fi trecute de la controler la vizualizare.
- Directiva ng-model poate fi legată de controale de intrare, cum ar fi controalele text și casete de selectare, pentru a le face mai dinamice în timpul rulării.
- Directiva ng-model poate fi folosită și pentru a completa o listă de selecție cu opțiuni care pot fi afișate utilizatorului.
