Hvordan bruke "ng-modell" i AngularJS med EKSEMPLER
James Hartman
Hva er ng-modell i AngularJs?
ng-model er et direktiv i Angular.JS som representerer modeller og dets primære formål er å binde "synet" til "modellen".
Anta for eksempel at du ønsket å presentere en enkel side for sluttbrukeren som den som vises nedenfor, som ber brukeren skrive inn "Fornavn" og "Etternavn" i tekstboksene. Og så ville du sørge for at du lagrer informasjonen som brukeren har lagt inn i datamodellen din.
Du kan bruke ng-modelldirektivet til å tilordne tekstboksfeltene "Fornavn" og "Etternavn" til datamodellen din.
ng-modelldirektivet vil sikre at dataene i "visningen" og den til "modellen" din holdes synkronisert hele tiden.
ng-modellens attributt
Som diskutert i introduksjonen til dette kapittelet, brukes ng-model-attributtet for å binde dataene i modellen din til visningen som presenteres for brukeren.
ng-modellattributtet brukes til,
- Bindende kontroller som input, tekstområde og markeringer i visningen inn i modellen.
- Angi en valideringsatferd – for eksempel kan en validering legges til en tekstboks som bare numeriske tegn kan legges inn i tekstboksen.
- ng-model-attributtet opprettholder tilstanden til kontrollen (Med tilstand mener vi at kontrollen og dataene er bundet til å alltid holdes synkronisert. Hvis verdien av dataene våre endres, vil den automatisk endre verdien i kontrollen og omvendt)
Hvordan bruke ng-modellen
1) Tekstområde
Tekstområde-taggen brukes til å definere en flerlinjers tekstinntastingskontroll. Tekstområdet kan inneholde et ubegrenset antall tegn, og teksten gjengis i en skrift med fast bredde.
Så la oss nå se på et enkelt eksempel på hvordan vi kan legge til ng-modelldirektivet til en tekstområdekontroll.
I dette eksemplet ønsker vi å vise hvordan vi kan sende en flerlinjestreng fra kontrolleren til visningen og knytte den verdien 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>
Code Forklaring:
- Ocuco ng-modell direktiv brukes til å feste medlemsvariabelen kalt "pDescription" til "tekstområde"-kontrollen. "sDescription"-variabelen vil faktisk inneholde teksten, som vil bli sendt videre til tekstområdekontrollen. Vi har også nevnt 2 attributter for tekstområdekontrollen som er rader=4 og kols=50. Disse attributtene har blitt nevnt slik at vi kan vise flere tekstlinjer. Ved å definere disse attributtene vil tekstområdet nå ha 4 rader og 50 kolonner slik at det kan vise flere tekstlinjer.
- Her knytter vi medlemsvariabelen til scope-objektet kalt "pDescription" og sette en strengverdi til variabelen.
- Legg merke til at vi setter /n bokstavelig i strengen slik at teksten kan være på flere linjer når den vises i tekstområdet. Den bokstavelige /n deler teksten i flere linjer slik at den kan gjengis i tekstområdekontrollen som flere tekstlinjer.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
Fra utgangen,
- Det kan tydelig sees at verdien som er tildelt pDescription-variabelen som en del av scope-objektet ble sendt til tekstområdekontrollen.
- Deretter har den blitt vist når siden er lastet inn.
2) Inndataelementer
ng-modelldirektivet kan også brukes på inngangselementene som tekstboksen, avmerkingsbokser, radioknapper, etc.
La oss se på et eksempel på hvordan vi kan bruke ng-modellen med "tekstboks" og "avkrysningsboks"-inndatatypen.
Her vil vi ha en tekstinndatatype som vil ha navnet «Guru99”, og det vil være to avmerkingsbokser, én som vil være merket som standard og den andre som ikke vil være merket.
<!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>
Code Forklaring:
- Ocuco ng-modell direktiv brukes til å knytte medlemsvariabelen kalt «pname» til tekstkontrollen av inputtypen. Variabelen «pname» vil inneholde teksten til «Guru99” som vil bli sendt videre til tekstinndatakontrollen. Merk at medlemsvariabelen kan gis et hvilket som helst navn.
- Her definerer vi vår første avkrysningsboks "Controllers" som er knyttet til medlemsvariabelen Topics.Controllers. Avmerkingsboksen vil merkes for denne kontrollkontrollen.
- Her definerer vi vår første avkrysningsboks "Modeller" som er knyttet til medlemsvariabelen Topics.Models. Avmerkingsboksen vil ikke merkes for denne kontrollkontrollen.
- Her legger vi til medlemsvariabelen kalt «pName» og setter inn strengverdien «Guru99. "
- Vi erklærer en medlemsmatrisevariabel kalt "Emner" og gir den to verdier, den første er "true" og den andre er "false". Så når den første avmerkingsboksen får verdien sann, vil avmerkingsboksen være merket for denne kontrollen, og på samme måte, siden den andre verdien er usann, vil ikke avmerkingsboksen merkes for denne kontrollen.
Hvis koden utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.
Utgang:
Fra utgangen,
- Det kan tydelig sees at verdien som er tilordnet pName-variabelen er «Guru99 "
- Siden den første sjekkverdien er «sann» den bestod, er avmerkingsboksen merket for «Kontrollere»-avmerkingsboksen. Likeledes siden den andre verdien er usann, er ikke avkrysningsboksen merket for "Modeller"-avmerkingsboksen.
3) Velg element fra rullegardinmenyen
ng-modelldirektivet kan også brukes på utvalgselementet og brukes til å fylle ut listeelementene i utvalgslisten.
La oss se på et eksempel på hvordan vi kan bruke ng-modellen med select input type.
Her vil vi ha en tekstinndatatype som vil ha navnet «Guru99”, og det vil være en valgliste med to listeelementer: «Kontroller» 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>
- Ocuco ng-modell direktiv brukes til å knytte medlemsvariabelen kalt "Emner" til valgtypekontrollen. Inne i valgkontrollen, for hvert av alternativene, legger vi ved medlemsvariabelen Topics.option1 for det første alternativet og Topics.option2 for det andre alternativet.
- Her definerer vi vår Topics-arrayvariabel som inneholder 2 nøkkelverdi-par. Det første paret har verdien "Kontrollere" og det andre har verdien "Modeller". Disse verdiene vil bli sendt for å velge input-tag i visningen. Hvis koden utføres vellykket, vil følgende utdata vises.
Utgang:
Fra utdataene kan man se at verdien som er tilordnet pName-variabelen er «Guru99”, og vi kan se at den valgte inngangskontrollen har alternativene «Kontrollere» og «Modeller».
Sammendrag
- Modeller i Angular JS er representert av ng-modelldirektivet. Hovedformålet med dette direktivet er å binde synet til modellen. Hvordan bygge en enkel kontroller ved å bruke direktivene ng-app, ng-controller og ng-modell.
- ng-modelldirektivet kan kobles til en "tekstområde"-inndatakontroll og flerlinjestrenger kan sendes fra kontrolleren til visningen.
- ng-modelldirektivet kan kobles til inndatakontroller som tekst- og avkrysningsbokskontroller for å gjøre dem mer dynamiske under kjøring.
- ng-modelldirektivet kan også brukes til å fylle ut en utvalgsliste med alternativer som kan vises for brukeren.
