Kuidas kasutada „ng-mudelit” AngularJS-is koos NÄIDETEGA

Mis on AngularJsis ng-mudel?

ng-model on Angular.JS-i direktiiv, mis esindab mudeleid ja selle peamine eesmärk on siduda "vaade" "mudeliga".

Oletagem näiteks, et soovite esitada lõppkasutajale lihtsat lehte, nagu allpool näidatud, mis palub kasutajal sisestada tekstikastidesse "Eesnimi" ja "Perenimi". Ja siis tahtsite tagada, et salvestate teabe, mille kasutaja on teie andmemudelisse sisestanud.

Saate kasutada ng-model direktiivi, et vastendada tekstikasti väljad "Eesnimi" ja "Perenimi" oma andmemudeliga.

ng-mudeli direktiiv tagab, et vaates olevad andmed ja teie mudeli andmed on kogu aeg sünkroonis.

ng-mudel AngularJS-is

ng-mudeli atribuut

Nagu selle peatüki sissejuhatuses kirjeldatud, kasutatakse atribuuti ng-model teie mudeli andmete sidumiseks kasutajale esitatava vaatega.

Atribuuti ng-model kasutatakse

  1. Juhtelementide (nt sisend, tekstiala ja valikud) sidumine vaates mudelisse.
  2. Pakkuge valideerimiskäitumist – näiteks saab tekstikasti lisada kinnituse, et tekstikasti saab sisestada ainult numbreid.
  3. Atribuut ng-model säilitab juhtelemendi oleku (oleku all peame silmas seda, et juhtelement ja andmed peavad olema alati sünkroonis. Kui meie andmete väärtus muutub, muudab see automaatselt juhtelemendi väärtust ja vastupidi)

Kuidas ng-mudelit kasutada

1) Tekstiala

Tekstiala silti kasutatakse mitmerealise tekstisisestuse juhtelemendi määratlemiseks. Tekstialal võib olla piiramatu arv tähemärke ja tekst renderdatakse fikseeritud laiusega kirjas.

Vaatame nüüd lihtsat näidet selle kohta, kuidas saame tekstiala juhtelemendile lisada ng-mudeli direktiivi.

Selles näites tahame näidata, kuidas saame mitmerealise stringi kontrollerist vaatesse edastada ja selle väärtuse tekstiala juhtelemendile lisada.

Tekstiala ng-mudelis

<!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>

Koodi selgitus:

  1. . ng-mudeli direktiiv kasutatakse liikmemuutuja "pDescriptioon” juhtelemendile „tekstiala”.Description” muutuja sisaldab tegelikult teksti, mis edastatakse tekstiala juhtelemendile. Oleme maininud ka kahte tekstiala juhtelemendi atribuuti, milleks on read=2 ja cols=4. Neid atribuute on mainitud, et saaksime näidata mitut tekstirida. Nende atribuutide määratlemisel on tekstialal nüüd 50 rida ja 4 veergu, nii et see suudab näidata mitut tekstirida.
  2. Siin lisame liikmemuutuja ulatuse objektile nimega "pDescription” ja pannes muutujale stringi väärtuse.
  3. Pange tähele, et me paneme stringi /n-literaali, nii et tekst võib tekstialal kuvamisel olla mitmerealine. Literaal /n jagab teksti mitmeks reaks, nii et seda saab tekstiala juhtelemendis renderdada mitme tekstireana.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

Tekstiala ng-mudelis

Väljundist,

  • On selgelt näha, et p-le omistatud väärtusDescriptioonmuutuja ulatuseobjekti osana anti edasi tekstiala juhtelemendile.
  • Seejärel on see kuvatud lehe laadimisel.

2) Sisendelemendid

ng-mudeli direktiivi saab rakendada ka sisestuselementidele, nagu tekstikast, märkeruudud, raadionupud jne.

Vaatame näidet selle kohta, kuidas saame kasutada ng-mudelit tekstikasti ja märkekastiga sisestustüübiga.

Siin on tekstisisestustüüp, mille nimi on “Guru99” ja seal on 2 märkeruutu, millest üks on vaikimisi märgitud ja teine ​​ei ole märgitud.

Sisendelemendid ng-mudelis

<!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>

Koodi selgitus:

  1. . ng-mudeli direktiiv kasutatakse liikmemuutuja nimega "pname" lisamiseks sisestustüübi teksti juhtelemendile. Muutuja "pname" sisaldab "Guru99" teksti, mis edastatakse tekstisisestuse juhtseadmele. Pange tähele, et liikme muutuja nimele võib anda mis tahes nime.
  2. Siin määratleme oma esimese märkeruudu "Controllers", mis on lisatud liikmemuutujale Topics.Controllers. Selle kontrolli juhtelemendi jaoks märgitakse märkeruut.
  3. Siin määratleme oma esimese märkeruudu “Models”, mis on lisatud liikmemuutujale Topics.Models. Selle kontrolli juhtelemendi märkeruutu ei märgita.
  4. Siia lisame liikmemuutuja nimega "pName" ja paneme stringi väärtuse "Guru99".
  5. Me deklareerime liikmemassiivi muutuja nimega "Teemad" ja anname sellele kaks väärtust, millest esimene on "true" ja teine ​​on "false". Nii et kui esimene märkeruut saab väärtuse tõene, märgitakse ruut seda juhtelementi ja kuna ka teine ​​väärtus on väär, siis selle juhtelemendi märkeruutu ei märgita.

Kui kood on edukalt käivitatud, kuvatakse koodi brauseris käivitamisel järgmine väljund.

Väljund:

Sisendelemendid ng-mudelis

Väljundist,

  • On selgelt näha, et muutujale pName omistatud väärtus on “Guru99”
  • Kuna esimene kontrollväärtus on "tõene", see läbis, on märkeruut "Controllers" märkeruudu jaoks märgitud. Kuna ka teine ​​väärtus on vale, ei ole märkeruut "Models" märkeruudu jaoks märgitud.

3) Valige rippmenüüst element

ng-mudeli käskkirja saab rakendada ka valitud elemendile ja seda kasutada loendiüksuste täitmiseks valikuloendis.

Vaatame näidet, kuidas saame kasutada ng-mudelit valitud sisenditüübiga.

Siin on tekstisisestustüüp, mille nimi on "Guru99" ja valikuloend, milles on 2 loendi üksust "Controller" ja "Models".

Valige element ng-mudeli rippmenüüst

<!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. . ng-mudeli direktiiv kasutatakse liikmemuutuja nimega "Teemad" lisamiseks valitud tüübi juhtelemendile. Valiku juhtelemendi sisse lisame iga valiku jaoks esimese valiku jaoks Topics.option1 liikmemuutuja ja teise valiku jaoks Topics.option2.
  2. Siin määratleme oma teemade massiivi muutuja, mis sisaldab 2 võtme-väärtuse paari. Esimese paari väärtus on “Controllers” ja teise paari väärtus “Models”. Need väärtused edastatakse vaates sisendmärgendi valimiseks. Kui kood on edukalt käivitatud, kuvatakse järgmine väljund.

Väljund:

Valige element ng-mudeli rippmenüüst

Väljundist on näha, et muutujale pName omistatud väärtus on “Guru99” ja näeme, et sisendi valikul on valikud “Controllers” ja “Models”.

kokkuvõte

  • Angular JS-i mudeleid esindab ng-mudeli direktiiv. Selle direktiivi esmane eesmärk on siduda vaade mudeliga. Kuidas luua lihtsat kontrollerit, kasutades ng-app, ng-controller ja ng-modell direktiive.
  • ng-mudeli direktiivi saab linkida "tekstiala" sisendi juhtelemendiga ja mitmerealisi stringe saab kontrollerist vaatesse edastada.
  • ng-mudeli direktiivi saab siduda sisendjuhtelementidega, nagu teksti- ja märkeruutude juhtelemendid, et muuta need käitusajal dünaamilisemaks.
  • ng-mudeli direktiivi saab kasutada ka valikuloendi täitmiseks suvanditega, mida saab kasutajale kuvada.