Kako koristiti “ng-model” u AngularJS s PRIMJERIMA
James Hartman
Što je ng-model u AngularJs-u?
ng-model je direktiva u Angular.JS koja predstavlja modele i njena primarna svrha je vezati "pogled" na "model".
Na primjer, pretpostavimo da krajnjem korisniku želite predstaviti jednostavnu stranicu kao što je ova prikazana u nastavku koja od korisnika traži da u tekstualne okvire unese "Ime" i "Prezime". Zatim ste htjeli osigurati da pohranjujete informacije koje je korisnik unio u vaš podatkovni model.
Možete upotrijebiti direktivu ng-model za mapiranje polja tekstnog okvira "Ime" i "Prezime" u svoj podatkovni model.
Direktiva ng-model osigurat će da podaci u "pogledu" i podacima vašeg "modela" budu sinkronizirani cijelo vrijeme.
Atribut ng-modela
Kao što je objašnjeno u uvodu u ovo poglavlje, atribut ng-model koristi se za povezivanje podataka u vašem modelu s prikazom prikazanim korisniku.
Atribut ng-model koristi se za,
- Povezivanje kontrola kao što su unos, područje teksta i odabiri u prikazu u model.
- Omogućite ponašanje provjere – na primjer, provjera valjanosti može se dodati tekstualnom okviru da se samo numerički znakovi mogu unijeti u tekstni okvir.
- Atribut ng-model održava stanje kontrole (Pod stanjem mislimo na to da su kontrola i podaci dužni uvijek biti sinkronizirani. Ako se vrijednost naših podataka promijeni, automatski će se promijeniti vrijednost u kontroli i obratno)
Kako koristiti ng-model
1) Područje teksta
Oznaka područja teksta koristi se za definiranje kontrole unosa teksta u više redaka. Područje teksta može sadržavati neograničen broj znakova, a tekst se prikazuje u fontu fiksne širine.
Sada pogledajmo jednostavan primjer kako možemo dodati direktivu ng-model kontroli tekstualnog područja.
U ovom primjeru želimo pokazati kako možemo proslijediti višeredni niz iz kontrolera u pogled i priložiti tu vrijednost kontroli tekstualnog područja.
<!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>
Code Objašnjenje:
- The direktiva ng-model koristi se za pripajanje varijable člana pod nazivom “pDescription” na kontrolu “textarea”.Description” varijabla će zapravo sadržavati tekst, koji će biti proslijeđen kontroli područja teksta. Također smo spomenuli 2 atributa za kontrolu textarea koji su rows=4 i cols=50. Ovi su atributi spomenuti kako bismo mogli prikazati više redaka teksta. Definiranjem ovih atributa tekstualno područje će sada imati 4 retka i 50 stupaca tako da može prikazati više redaka teksta.
- Ovdje pridružujemo varijablu člana objektu opsega pod nazivom "pDescription” i stavljanje vrijednosti niza u varijablu.
- Imajte na umu da stavljamo /n literal u niz tako da se tekst može sastojati od više redaka kada se prikazuje u tekstualnom području. /n literal dijeli tekst u više redaka tako da se može prikazati u kontroli textarea kao više redaka teksta.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.
Izlaz:
Iz izlaza,
- Jasno se može vidjeti da je vrijednost dodijeljena strDescriptionska varijabla kao dio objekta opsega proslijeđena je kontroli textarea.
- Naknadno se prikazuje kada se stranica učita.
2) Ulazni elementi
Direktiva ng-model također se može primijeniti na elemente unosa kao što su tekstualni okvir, potvrdni okviri, radio gumbi itd.
Pogledajmo primjer kako možemo koristiti ng-model s tipom unosa “textbox” i “checkbox”.
Ovdje ćemo imati tip unosa teksta koji će imati naziv "Guru99” i bit će 2 potvrdna okvira, jedan koji će biti označen prema zadanim postavkama, a drugi neće biti označen.
<!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>
Code Objašnjenje:
- The direktiva ng-model koristi se za dodavanje varijable člana pod nazivom „pname“ kontroli teksta tipa unosa. Varijabla „pname“ sadržavat će tekst „Guru99” koji će biti proslijeđen kontroli za unos teksta. Imajte na umu da se nazivu varijable članice može dati bilo koje ime.
- Ovdje definiramo naš prvi potvrdni okvir "Kontroleri" koji je pridružen varijabli člana Topics.Kontroleri. Potvrdni okvir bit će označen za ovu kontrolu provjere.
- Ovdje definiramo naš prvi potvrdni okvir "Modeli" koji je pridružen varijabli člana Topics.Models. Potvrdni okvir neće biti označen za ovu kontrolu provjere.
- Ovdje pridružujemo varijablu člana pod nazivom „pName“ i stavljamo niz vrijednosti „Guru99”.
- Deklariramo varijablu niza članova pod nazivom "Topics" i dajemo joj dvije vrijednosti, prva je "true", a druga je "false". Dakle, kada prvi potvrdni okvir dobije vrijednost true, potvrdni okvir bit će označen za ovu kontrolu, a isto tako, budući da je druga vrijednost lažna, potvrdni okvir neće biti označen za ovu kontrolu.
Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete kôd u pregledniku.
Izlaz:
Iz izlaza,
- Jasno se vidi da je vrijednost dodijeljena varijabli pName „Guru99 "
- Budući da je prva provjerna vrijednost "true" prošla je, potvrdni okvir je označen za potvrdni okvir "Kontroleri". Isto tako, budući da je druga vrijednost lažna, potvrdni okvir nije označen za potvrdni okvir "Modeli".
3) Odaberite element s padajućeg izbornika
Direktiva ng-model također se može primijeniti na element odabira i koristiti za popunjavanje stavki popisa na popisu odabira.
Pogledajmo primjer kako možemo koristiti ng-model s odabranom vrstom unosa.
Ovdje ćemo imati tip unosa teksta koji će imati naziv "Guru99” i pojavit će se popis za odabir s 2 stavke popisa „Kontroler” i „Modeli”.
<!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>
- The direktiva ng-model koristi se za pripajanje varijable člana pod nazivom "Teme" kontroli odabira tipa. Unutar kontrole odabira, za svaku od opcija, prilažemo varijablu člana Topics.option1 za prvu opciju i Topics.option2 za drugu opciju.
- Ovdje definiramo našu varijablu polja Topics koja sadrži 2 para ključ-vrijednost. Prvi par ima vrijednost "Kontroleri", a drugi ima vrijednost "Modeli". Ove vrijednosti će biti proslijeđene za odabir ulazne oznake u prikazu. Ako se kôd uspješno izvede, prikazat će se sljedeći izlaz.
Izlaz:
Iz izlaza se može vidjeti da je vrijednost dodijeljena varijabli pName „Guru99” i možemo vidjeti da ulazna kontrola odabira ima opcije „Kontroleri” i „Modeli”.
Rezime
- Modeli u Angular JS-u predstavljeni su direktivom ng-model. Primarna svrha ove direktive je vezanje pogleda na model. Kako izgraditi jednostavan kontroler pomoću direktiva ng-app, ng-controller i ng-model.
- Direktiva ng-model može se povezati s kontrolom unosa "tekstualnog područja", a višeredni nizovi mogu se proslijediti iz kontrolera u pogled.
- Direktiva ng-model može se povezati s kontrolama unosa kao što su kontrole teksta i potvrdnog okvira kako bi bile dinamičnije tijekom izvođenja.
- Direktiva ng-model također se može koristiti za popunjavanje popisa odabira opcijama koje se mogu prikazati korisniku.
