Az „ng-model” használata az AngularJS-ben a PÉLDÁK segítségével
James Hartman
Mi az ng-model az AngularJs-ben?
Az ng-model egy direktíva az Angular.JS-ben, amely modelleket reprezentál, és elsődleges célja a „nézet” és a „modell” összekapcsolása.
Tegyük fel például, hogy egy olyan egyszerű oldalt szeretne bemutatni a végfelhasználónak, mint amilyen az alább látható, és megkéri a felhasználót, hogy írja be a „Keresztnév” és „Vezetéknév” szövegmezőkbe. És akkor azt akarta biztosítani, hogy tárolja a felhasználó által az adatmodellben megadott információkat.
Az ng-model direktíva segítségével leképezheti a „Keresztnév” és „Vezetéknév” szövegmezőket az adatmodellre.
Az ng-model direktíva biztosítja, hogy a „nézetben” és az Ön „modelljében” lévő adatok egész idő alatt szinkronban legyenek.
Az ng-modell attribútum
A fejezet bevezetőjében leírtak szerint az ng-model attribútumot arra használják, hogy a modellben lévő adatokat a felhasználónak megjelenített nézethez kapcsolják.
Az ng-model attribútumot a következő esetekben használják:
- Vezérlők, például bevitel, szövegterület és kijelölések a nézetben a modellbe kötése.
- Adjon meg egy érvényesítési viselkedést – például egy érvényesítést adhat hozzá egy szövegmezőhöz, amelyben csak numerikus karakterek írhatók be.
- Az ng-model attribútum fenntartja a vezérlő állapotát ( Állapot alatt azt értjük, hogy a vezérlőt és az adatokat mindig szinkronban kell tartani. Ha az adataink értéke megváltozik, akkor automatikusan megváltoztatja a vezérlőben lévő értéket, ill. viszont)
Hogyan kell használni az ng-modellt
1) Szöveg terület
A szövegterület címke többsoros szövegbeviteli vezérlő meghatározására szolgál. A szövegterület korlátlan számú karaktert tartalmazhat, és a szöveg fix szélességű betűtípussal jelenik meg.
Tehát most nézzünk egy egyszerű példát arra, hogyan adhatjuk hozzá az ng-model direktívát egy szövegterület-vezérlőhöz.
Ebben a példában azt szeretnénk bemutatni, hogyan adhatunk át többsoros karakterláncot a vezérlőből a nézetbe, és hogyan csatolhatjuk ezt az értéket a szövegterület vezérlőeleméhez.
<!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>
Kód magyarázata:
- A ng-modell direktíva a „p” nevű tagváltozó csatolására szolgálDescription” a „textarea” vezérlőhöz.A „pDescription” változó ténylegesen tartalmazza a szöveget, amely továbbadódik a szövegterület vezérlőjének. A szövegterület-vezérlőhöz két attribútumot is említettünk, amelyek a sorok=2 és a oszlopok=4. Ezeket az attribútumokat azért említettük, hogy több sornyi szöveget is megjeleníthessünk. Ezen attribútumok meghatározásával a szövegterület 50 sorral és 4 oszloppal rendelkezik, így több sornyi szöveget is megjeleníthet.
- Itt csatoljuk a tagváltozót a „pDescription” és karakterlánc-értéket ad a változóhoz.
- Ne feledje, hogy az /n literált a karakterláncba helyezzük, hogy a szöveg többsoros legyen, amikor a szövegmezőben jelenik meg. Az /n literál több sorra bontja a szöveget, így a szövegterület vezérlőjében több soros szövegként jeleníthető meg.
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
A kimenetből,
- Jól látható, hogy a p-hez rendelt értékDescription változó a hatókör objektum részeként át lett adva a textarea vezérlőnek.
- Ezt követően az oldal betöltésekor megjelenik.
2) Bemeneti elemek
Az ng-model direktíva olyan beviteli elemekre is alkalmazható, mint a szövegdoboz, jelölőnégyzet, rádiógombok stb.
Nézzünk egy példát arra, hogyan használhatjuk az ng-modellt „textbox” és „checkbox” beviteli típussal.
Itt lesz egy szövegbeviteli típusunk, aminek a neve „Guru99”, és lesz 2 jelölőnégyzet, amelyek közül az egyik alapértelmezés szerint be lesz jelölve, a másik pedig nem.
<!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>
Kód magyarázata:
- A ng-modell direktíva a „pname” nevű tagváltozó csatolására szolgál a beviteli típusú szövegvezérlőhöz. A „pname” változó tartalmazza a „Guru99” szövegét, amely a szövegbeviteli vezérlőhöz kerül. Vegye figyelembe, hogy a tagváltozó nevéhez bármilyen név adható.
- Itt definiáljuk az első „Controllers” jelölőnégyzetünket, amely a Topics.Controllers tagváltozóhoz kapcsolódik. A jelölőnégyzet be lesz jelölve ehhez az ellenőrzési vezérlőhöz.
- Itt definiáljuk az első „Modellek” jelölőnégyzetünket, amely a Topics.Models tagváltozóhoz kapcsolódik. A jelölőnégyzet nem lesz bejelölve ennél az ellenőrzési vezérlőnél.
- Itt csatoljuk a „pName” nevű tagváltozót, és beírjuk a „Guru99” karakterlánc értékét.
- Egy „Topics” nevű tagtömbváltozót deklarálunk, és két értéket adunk neki, az első „true”, a második „false”. Tehát amikor az első jelölőnégyzet igaz értéket kap, a jelölőnégyzet be lesz jelölve ezt a vezérlőt, és hasonlóképpen, mivel a második érték false, a jelölőnégyzet nem lesz bejelölve ennél a vezérlőnél.
Ha a kód sikeresen lefut, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.
output:
A kimenetből,
- Jól látható, hogy a pName változóhoz rendelt érték „Guru99”
- Mivel az első ellenőrző érték „igaz”, átment, a jelölőnégyzet a „Controllers” jelölőnégyzetnél be van jelölve. Hasonlóképpen, mivel a második érték false, a jelölőnégyzet nincs bejelölve a „Modellek” jelölőnégyzetnél.
3) Válassza ki az elemet a legördülő menüből
Az ng-model direktíva a kijelölő elemre is alkalmazható, és a listaelemek feltöltésére használható a kiválasztási listában.
Nézzünk egy példát arra, hogyan használhatjuk az ng-modellt a kiválasztott bemeneti típussal.
Itt lesz egy szövegbeviteli típusunk, melynek neve „Guru99”, és lesz egy kiválasztási lista 2 listaelemgel: „Controller” és „Models”.
<!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>
- A ng-modell direktíva a „Témák” nevű tagváltozó csatolására szolgál a típusválasztó vezérlőhöz. A kiválasztó vezérlőn belül mindegyik opcióhoz csatoljuk a Topics.option1 tagváltozóját az első opcióhoz és a Topics.option2 tagváltozót a másodikhoz.
- Itt definiáljuk a Témák tömbváltozóját, amely 2 kulcs-érték párt tartalmaz. Az első pár értéke „vezérlők”, a másodiké pedig „modellek”. Ezeket az értékeket adjuk át a bemeneti címke kiválasztásához a nézetben. Ha a kód sikeresen lefut, a következő kimenet jelenik meg.
output:
A kimenetből látható, hogy a pName változóhoz rendelt érték „Guru99”, és láthatjuk, hogy a kiválasztható bemeneti vezérlőben „Controllers” és „Models” opciók állnak rendelkezésre.
Összegzésként
- Az Angular JS modelljeit az ng-model direktíva képviseli. Ennek az irányelvnek az elsődleges célja, hogy a nézetet a modellhez kösse. Hogyan készítsünk egyszerű vezérlőt az ng-app, ng-controller és ng-model direktívák segítségével.
- Az ng-model direktíva egy „szövegterület” bemeneti vezérlőhöz kapcsolható, és többsoros karakterláncok adhatók át a vezérlőből a nézetbe.
- Az ng-model direktíva összekapcsolható olyan beviteli vezérlőkkel, mint a szöveg és a jelölőnégyzet vezérlők, hogy futás közben dinamikusabbak legyenek.
- Az ng-model direktíva arra is használható, hogy feltöltsön egy listát a felhasználó számára megjeleníthető opciókkal.
