Kuinka käyttää "ng-mallia" AngularJS:ssä ESIMERKKEJÄ
James Hartman
Mikä on ng-malli AngularJs:ssä?
ng-model on Angular.JS:n ohje, joka edustaa malleja ja sen ensisijainen tarkoitus on sitoa "näkymä" "malliin".
Oletetaan esimerkiksi, että haluat esittää loppukäyttäjälle alla olevan kaltaisen yksinkertaisen sivun, joka pyytää käyttäjää syöttämään "etunimi" ja "sukunimi" tekstiruutuihin. Ja sitten halusit varmistaa, että tallennat tiedot, jotka käyttäjä on syöttänyt tietomalliisi.
Voit käyttää ng-model-direktiiviä kartoittaaksesi tekstilaatikkokentät "Etunimi" ja "Sukunimi" tietomalliisi.
ng-model-direktiivi varmistaa, että "näkymän" ja "mallisi" tiedot pidetään synkronoituna koko ajan.
ng-mallin ominaisuus
Kuten tämän luvun johdannossa mainittiin, ng-model-attribuuttia käytetään mallin tietojen sitomiseen käyttäjälle esitettyyn näkymään.
Attribuuttia ng-model käytetään
- Sidonta säätimet, kuten syöttö, tekstialue ja valinnat näkymässä malliin.
- Tarjoa vahvistuskäyttäytyminen – esimerkiksi tekstiruutuun voidaan lisätä vahvistus, jossa tekstiruutuun voidaan syöttää vain numeerisia merkkejä.
- Attribuutti ng-model ylläpitää ohjausobjektin tilan (Tilalla tarkoitamme, että ohjausobjekti ja data on sidottu aina synkronoituna. Jos tietojemme arvo muuttuu, se muuttaa automaattisesti ohjausobjektin arvon ja päinvastoin)
Kuinka käyttää ng-mallia
1) Tekstialue
Tekstialueen tunnistetta käytetään monirivisen tekstinsyötön ohjauksen määrittämiseen. Tekstialueelle mahtuu rajoittamaton määrä merkkejä, ja teksti hahmonnetaan kiinteäleveällä fontilla.
Katsotaanpa nyt yksinkertaista esimerkkiä siitä, kuinka voimme lisätä ng-mallin käskyn tekstialueen ohjaukseen.
Tässä esimerkissä haluamme näyttää, kuinka voimme välittää monirivisen merkkijonon ohjaimesta näkymään ja liittää sen arvon tekstialueen ohjausobjektiin.
<!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>
Koodin selitys:
- - ng-mallin direktiivi käytetään liittämään jäsenmuuttuja nimeltä "pDescription" "tekstialue"-säätimeenDescription”-muuttuja sisältää itse asiassa tekstin, joka välitetään tekstialueen ohjaukseen. Olemme myös maininneet 2 attribuuttia tekstialueen ohjaukselle, jotka ovat rivit=4 ja sarakkeet=50. Nämä attribuutit on mainittu, jotta voimme näyttää useita tekstirivejä. Määrittämällä nämä attribuutit tekstialueella on nyt 4 riviä ja 50 saraketta, jotta se voi näyttää useita tekstirivejä.
- Tässä liitämme jäsenmuuttujan soveltamisalaobjektiin nimeltä "pDescription" ja lisäämällä muuttujalle merkkijonoarvo.
- Huomaa, että asetamme /n-literaalin merkkijonoon, jotta tekstissä voi olla useita rivejä, kun se näytetään tekstialueella. /n-literaali jakaa tekstin useiksi riveiksi, jotta se voidaan hahmontaa tekstialueen ohjausobjektissa useiksi tekstiriveiksi.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.
lähtö:
Ulostulosta,
- Voidaan selvästi nähdä, että p:lle annettu arvoDescriptioni-muuttuja osana laajuusobjektia välitettiin tekstialueen ohjaukseen.
- Myöhemmin se on näkynyt, kun sivu on ladattu.
2) Syöttöelementit
ng-model-direktiiviä voidaan soveltaa myös syöttöelementteihin, kuten tekstiruutuun, valintaruutuihin, valintanappeihin jne.
Katsotaanpa esimerkkiä kuinka voimme käyttää ng-mallia "textbox"- ja "checkbox"-syöttötyypeillä.
Täällä meillä on tekstinsyöttötyyppi, jonka nimi on "Guru99" ja siellä on 2 valintaruutua, joista toinen on oletusarvoisesti merkitty ja toinen ei ole merkitty.
<!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>
Koodin selitys:
- - ng-mallin direktiivi käytetään liittämään jäsenmuuttuja nimeltä "pname" syöttötyypin tekstiohjaimeen. "Pname"-muuttuja sisältää "Guru99"-tekstin, joka välitetään tekstinsyöttöohjaimelle. Huomaa, että jäsenmuuttujan nimelle voidaan antaa mikä tahansa nimi.
- Tässä määrittelemme ensimmäisen valintaruudumme "Controllers", joka on liitetty jäsenmuuttujaan Topics.Controllers. Tämän tarkistussäätimen valintaruutu on merkitty.
- Tässä määritämme ensimmäisen valintaruudumme "Models", joka on liitetty jäsenmuuttujaan Topics.Models. Tämän tarkistusobjektin valintaruutua ei merkitä.
- Tähän liitämme jäsenmuuttujan nimeltä "pName" ja laitamme merkkijonoarvon "Guru99".
- Ilmoitamme jäsentaulukon muuttujan nimeltä "Topics" ja annamme sille kaksi arvoa, joista ensimmäinen on "true" ja toinen on "false". Joten kun ensimmäinen valintaruutu saa arvon tosi, valintaruutu merkitään tämä ohjausobjekti, ja samoin, koska toinen arvo on epätosi, valintaruutua ei merkitä tälle ohjausobjektille.
Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.
lähtö:
Ulostulosta,
- Voidaan selvästi nähdä, että pName-muuttujalle annettu arvo on "Guru99"
- Koska ensimmäinen tarkistusarvo on "true", se läpäisi, valintaruutu on merkitty "Controllers" -valintaruudulle. Samoin koska toinen arvo on epätosi, valintaruutua ei ole merkitty Mallit-valintaruudulle.
3) Valitse elementti pudotusvalikosta
ng-model-direktiiviä voidaan soveltaa myös Select-elementtiin, ja sitä voidaan käyttää luettelon kohteiden täyttämiseen valintaluettelossa.
Katsotaanpa esimerkkiä, kuinka voimme käyttää ng-mallia valitun syöttötyypin kanssa.
Täällä meillä on tekstinsyöttötyyppi, jonka nimi on "Guru99", ja siellä on valintaluettelo, jossa on 2 luettelokohdetta "Ohjain" ja "Malleja".
<!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>
- - ng-mallin direktiivi käytetään liittämään jäsenmuuttuja nimeltä "Topics" valintatyypin ohjaukseen. Valintasäätimen sisällä liitämme kunkin vaihtoehdon osalta Topics.option1:n jäsenmuuttujan ensimmäiselle vaihtoehdolle ja Topics.option2:n toiselle vaihtoehdolle.
- Tässä määrittelemme Aiheet-taulukkomuuttujamme, joka sisältää 2 avainarvoparia. Ensimmäisen parin arvo on "Controllers" ja toisen "mallit". Nämä arvot välitetään syötetunnisteen valitsemiseksi näkymässä. Jos koodi suoritetaan onnistuneesti, seuraava tulos näytetään.
lähtö:
Ulostuloksesta voidaan nähdä, että pName-muuttujalle annettu arvo on “Guru99” ja voimme nähdä, että valintatulon ohjauksessa on vaihtoehdot “Controllers” ja “Models”.
Yhteenveto
- Angular JS:n malleja edustaa ng-model-direktiivi. Tämän direktiivin ensisijainen tarkoitus on sitoa näkemys malliin. Kuinka rakentaa yksinkertainen ohjain ng-app-, ng-controller- ja ng-model-direktiiveillä.
- ng-mallin direktiivi voidaan linkittää "tekstialueen" syöttöohjaukseen ja monirivisiä merkkijonoja voidaan siirtää ohjaimesta näkymään.
- ng-mallin direktiivi voidaan linkittää syöttöohjaimiin, kuten teksti- ja valintaruutusäätimiin, jotta niistä tulee dynaamisempia ajon aikana.
- ng-model-direktiiviä voidaan käyttää myös valintaluettelon täyttämiseen vaihtoehdoilla, jotka voidaan näyttää käyttäjälle.
