Sådan bruger du "ng-model" i AngularJS med EKSEMPLER
Hvad er ng-model i AngularJs?
ng-model er et direktiv i Angular.JS, der repræsenterer modeller, og dets primære formål er at binde "synet" til "modellen".
Antag for eksempel, at du ønskede at præsentere en simpel side for slutbrugeren som den, der er vist nedenfor, som beder brugeren om at indtaste "Fornavn" og "Efternavn" i tekstbokse. Og så ville du sikre dig, at du gemmer de oplysninger, som brugeren har indtastet i din datamodel.
Du kan bruge ng-model-direktivet til at tilknytte tekstboksfelterne "Fornavn" og "Efternavn" til din datamodel.
ng-modeldirektivet vil sikre, at dataene i "visningen" og dataene i din "model" holdes synkroniseret hele tiden.
ng-modellens egenskab
Som diskuteret i introduktionen til dette kapitel, bruges ng-model-attributten til at binde dataene i din model til den visning, der præsenteres for brugeren.
ng-model attributten bruges til,
- Bindende kontroller såsom input, tekstområde og markeringer i visningen ind i modellen.
- Angiv en valideringsadfærd – for eksempel kan en validering tilføjes til en tekstboks, hvor kun numeriske tegn kan indtastes i tekstboksen.
- ng-model attributten opretholder kontrollens tilstand (Med tilstand mener vi, at kontrollen og dataene er bundet til altid at blive holdt synkroniserede. Hvis værdien af vores data ændres, vil den automatisk ændre værdien i kontrollen og omvendt)
Sådan bruger du ng-modellen
1) Tekstområde
Tekstområdemærket bruges til at definere en multi-line tekstinputkontrol. Tekstområdet kan indeholde et ubegrænset antal tegn, og teksten gengives i en skrifttype med fast bredde.
Så lad os nu se på et simpelt eksempel på, hvordan vi kan tilføje ng-model-direktivet til en tekstområdekontrol.
I dette eksempel ønsker vi at vise, hvordan vi kan sende en flerlinjet streng fra controlleren til visningen og knytte denne værdi til tekstområdekontrollen.
<!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>
Kodeforklaring:
- ng-model direktiv bruges til at vedhæfte medlemsvariablen kaldet "sDescription" til "tekstområde"-kontrollen. "sDescription" variabel vil faktisk indeholde teksten, som vil blive videregivet til tekstområdekontrol. Vi har også nævnt 2 attributter for tekstområdekontrollen, som er rows=4 og cols=50. Disse attributter er blevet nævnt, så vi kan vise flere tekstlinjer. Ved at definere disse attributter vil tekstområdet nu have 4 rækker og 50 kolonner, så det kan vise flere tekstlinjer.
- Her knytter vi medlemsvariablen til scope-objektet kaldet "pDescription" og sætte en strengværdi til variablen.
- Bemærk, at vi sætter /n literal i strengen, så teksten kan være af flere linjer, når den vises i tekstområdet. /n-literalen opdeler teksten i flere linjer, så den kan gengives i tekstområdekontrollen som flere tekstlinjer.
Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører koden i browseren.
Output:
Fra udgangen,
- Det kan tydeligt ses, at værdien tildelt pDescription-variablen som en del af scope-objektet blev videregivet til tekstområdekontrollen.
- Efterfølgende er den blevet vist, når siden er indlæst.
2) Indgangselementer
ng-model-direktivet kan også anvendes på input-elementer såsom tekstboksen, afkrydsningsfelter, radioknapper osv.
Lad os se på et eksempel på, hvordan vi kan bruge ng-modellen med inputtypen "tekstboks" og "afkrydsningsfelt".
Her vil vi have en tekstindtastningstype, som vil have navnet "Guru99", og der vil være 2 afkrydsningsfelter, den ene vil være markeret som standard, og den anden vil ikke være markeret.
<!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>
Kodeforklaring:
- ng-model direktiv bruges til at vedhæfte medlemsvariablen kaldet "pname" til inputtypetekstkontrollen. Variablen "pname" vil indeholde teksten til "Guru99", som vil blive videregivet til tekstinput-kontrollen. Bemærk, at et hvilket som helst navn kan gives til navnet på medlemsvariablen.
- Her definerer vi vores første afkrydsningsfelt "Controllers", som er knyttet til medlemsvariablen Topics.Controllers. Afkrydsningsfeltet vil være markeret for denne kontrolkontrol.
- Her definerer vi vores første afkrydsningsfelt "Modeller", som er knyttet til medlemsvariablen Topics.Models. Afkrydsningsfeltet vil ikke være markeret for denne kontrolkontrol.
- Her vedhæfter vi medlemsvariablen kaldet "pName" og sætter en strengværdi på "Guru99".
- Vi erklærer en medlemsmatrixvariabel kaldet "Emner" og giver den to værdier, den første er "sand" og den anden er "falsk". Så når det første afkrydsningsfelt får værdien sand, vil afkrydsningsfeltet være markeret for denne kontrol, og da den anden værdi er falsk, vil afkrydsningsfeltet ikke være markeret for denne kontrol.
Hvis koden eksekveres med succes, vil følgende output blive vist, når du kører din kode i browseren.
Output:
Fra udgangen,
- Det kan tydeligt ses, at værdien tildelt pName-variablen er "Guru99"
- Da den første kontrolværdi er "sand", er den bestået, er afkrydsningsfeltet markeret for afkrydsningsfeltet "Kontrollere". Ligeledes, da den anden værdi er falsk, er afkrydsningsfeltet ikke markeret for afkrydsningsfeltet "Modeller".
3) Vælg element fra rullemenuen
ng-model-direktivet kan også anvendes på udvalgselementet og bruges til at udfylde listeelementerne i udvalgslisten.
Lad os se på et eksempel på, hvordan vi kan bruge ng-modellen med den valgte inputtype.
Her vil vi have en tekstinputtype, som vil have navnet "Guru99", og der vil være en udvalgt liste med 2 listeelementer af "Controller" og "Modeller".
<!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-model direktiv bruges til at vedhæfte medlemsvariablen kaldet "Emner" til kontrolelementet for valg af type. Inde i valgkontrollen, for hver af mulighederne, vedhæfter vi medlemsvariablen Topics.option1 for den første mulighed og Topics.option2 for den anden mulighed.
- Her definerer vi vores Topics-arrayvariabel, som indeholder 2 nøgleværdipar. Det første par har værdien "Controllers", og det andet har værdien "Modeller". Disse værdier vil blive videregivet til at vælge input-tag i visningen. Hvis koden udføres korrekt, vil følgende output blive vist.
Output:
Fra outputtet kan det ses, at værdien tildelt pName-variablen er "Guru99", og vi kan se, at select input-kontrollen har mulighederne "Controllers" og "Models".
Resumé
- Modeller i Angular JS er repræsenteret af ng-model direktivet. Det primære formål med dette direktiv er at binde synspunktet til modellen. Sådan bygger du en simpel controller ved hjælp af direktiverne ng-app, ng-controller og ng-model.
- ng-modeldirektivet kan kobles til en "tekstområde"-inputkontrol, og flerlinjestrenge kan overføres fra controlleren til visningen.
- ng-modeldirektivet kan linkes til inputkontroller som tekst- og afkrydsningsfeltkontroller for at gøre dem mere dynamiske under kørsel.
- ng-modeldirektivet kan også bruges til at udfylde en udvalgsliste med muligheder, som kan vises for brugeren.