Kako koristiti “ng-model” u AngularJS s PRIMJERIMA

Š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.

ng-model u AngularJS

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,

  1. Povezivanje kontrola kao što su unos, područje teksta i odabiri u prikazu u model.
  2. 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.
  3. 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.

Područje teksta u ng-modelu

<!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>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
	<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>

Objašnjenje koda:

  1. Korištenje električnih romobila ističe 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.
  2. Ovdje pridružujemo varijablu člana objektu opsega pod nazivom "pDescription” i stavljanje vrijednosti niza u varijablu.
  3. 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:

Područje teksta u ng-modelu

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 vrstu unosa teksta koja ć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.

Ulazni elementi u ng-modelu

<!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>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
        
		Name : <input type="text" ng-model="pname"><br>
		&nbsp;&nbsp;&nbsp;
		Topic : <br>&nbsp;&nbsp;&nbsp;
		<input type="checkbox" ng-model="Topic.Controller">Controller<br>&nbsp;&nbsp;&nbsp;
		<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>

Objašnjenje koda:

  1. Korištenje električnih romobila ističe direktiva ng-model koristi se za pripajanje varijable člana pod nazivom "pname" kontroli teksta unosa. Varijabla “pname” sadržavat će tekst “Guru99” koji će biti proslijeđen kontroli unosa teksta. Imajte na umu da se imenu varijable člana može dati bilo koje ime.
  2. 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.
  3. 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.
  4. Ovdje prilažemo varijablu člana pod nazivom "pName" i stavljamo vrijednost niza "Guru99".
  5. 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:

Ulazni elementi u ng-modelu

Iz izlaza,

  • Jasno se može vidjeti 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 vrstu unosa teksta koja će imati naziv "Guru99" i postojat će popis za odabir s 2 stavke popisa "Kontroler" i "Modeli".

Odaberite element s padajućeg izbornika u ng-modelu

<!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>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
        
		Name : <input type="text" ng-model="pName" value="Guru99"><br>
		&nbsp;&nbsp;&nbsp;
		Topic : <br>&nbsp;&nbsp;&nbsp;
        
		<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>
  1. Korištenje električnih romobila ističe 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.
  2. 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:

Odaberite element s padajućeg izbornika u ng-modelu

Iz izlaza se može vidjeti da je vrijednost dodijeljena varijabli pName "Guru99" i možemo vidjeti da kontrola odabira ulaza 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.