Hur man använder "ng-model" i AngularJS med EXEMPEL
James Hartman
Vad är ng-modell i AngularJs?
ng-model är ett direktiv i Angular.JS som representerar modeller och dess primära syfte är att binda "synen" till "modellen".
Anta till exempel att du ville presentera en enkel sida för slutanvändaren som den som visas nedan som ber användaren att ange "Förnamn" och "Efternamn" i textrutorna. Och då ville du säkerställa att du lagrar informationen som användaren har skrivit in i din datamodell.
Du kan använda ng-modelldirektivet för att mappa textrutefälten "Förnamn" och "Efternamn" till din datamodell.
ng-modelldirektivet kommer att säkerställa att data i "vyn" och den i din "modell" hålls synkroniserade hela tiden.
ng-modellens attribut
Som diskuterats i inledningen till detta kapitel, används attributet ng-model för att binda data i din modell till vyn som presenteras för användaren.
Attributet ng-model används för,
- Bindande kontroller som inmatning, textområde och markeringar i vyn in i modellen.
- Ange ett valideringsbeteende – till exempel kan en validering läggas till i en textruta där endast numeriska tecken kan anges i textrutan.
- Attributet ng-model upprätthåller tillståndet för kontrollen (Med tillstånd menar vi att kontrollen och data är bundna att alltid hållas synkroniserade. Om värdet på vår data ändras kommer det automatiskt att ändra värdet i kontrollen och vice versa)
Hur man använder ng-modellen
1) Textområde
Textområdestaggen används för att definiera en textinmatningskontroll med flera rader. Textområdet kan innehålla ett obegränsat antal tecken, och texten återges i ett teckensnitt med fast bredd.
Så låt oss nu titta på ett enkelt exempel på hur vi kan lägga till ng-modelldirektivet till en textområdeskontroll.
I det här exemplet vill vi visa hur vi kan skicka en flerradssträng från styrenheten till vyn och bifoga det värdet till textområdeskontrollen.
<!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>
Kodförklaring:
- Smakämnen ng-modelldirektivet används för att bifoga medlemsvariabeln som heter "sDescription" till "textarea"-kontrollen. "sidDescription”-variabeln kommer faktiskt att innehålla texten, som kommer att skickas vidare till textområdeskontrollen. Vi har också nämnt 2 attribut för textarea-kontrollen som är rows=4 och cols=50. Dessa attribut har nämnts så att vi kan visa flera textrader. Genom att definiera dessa attribut kommer textområdet nu att ha 4 rader och 50 kolumner så att det kan visa flera rader text.
- Här bifogar vi medlemsvariabeln till scope-objektet som heter "pDescription” och sätta ett strängvärde till variabeln.
- Observera att vi sätter /n-literalen i strängen så att texten kan vara på flera rader när den visas i textområdet. /n-literalen delar upp texten i flera rader så att den kan återges i textområdeskontrollen som flera textrader.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör koden i webbläsaren.
Produktion:
Från utgången,
- Det kan tydligt ses att värdet som tilldelas sidDescriptjonvariabeln som en del av scope-objektet skickades till textarea-kontrollen.
- Därefter har den visats när sidan laddas.
2) Ingångselement
ng-modelldirektivet kan också tillämpas på inmatningselementen såsom textrutan, kryssrutor, radioknappar, etc.
Låt oss titta på ett exempel på hur vi kan använda ng-modellen med inmatningstypen "textbox" och "checkbox".
Här kommer vi att ha en textinmatningstyp som kommer att ha namnet "Guru99" och det kommer att finnas 2 kryssrutor, en som kommer att markeras som standard och den andra kommer inte att markeras.
<!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>
Kodförklaring:
- Smakämnen ng-modelldirektivet används för att bifoga medlemsvariabeln som heter "pname" till inmatningstypens textkontroll. Variabeln "pname" kommer att innehålla texten för "Guru99" som kommer att skickas vidare till textinmatningskontrollen. Observera att vilket namn som helst kan ges till namnet på medlemsvariabeln.
- Här definierar vi vår första kryssruta "Controllers" som är kopplad till medlemsvariabeln Topics.Controllers. Kryssrutan kommer att markeras för denna kontroll.
- Här definierar vi vår första kryssruta "Modeller" som är kopplad till medlemsvariabeln Topics.Models. Kryssrutan kommer inte att markeras för denna kontroll.
- Här bifogar vi medlemsvariabeln som heter "pName" och sätter ett strängvärde på "Guru99".
- Vi deklarerar en medlemsmatrisvariabel som heter "Ämnen" och ger den två värden, det första är "sant" och det andra är "falskt". Så när den första kryssrutan får värdet sant, kommer kryssrutan att markeras för denna kontroll, och på samma sätt, eftersom det andra värdet är falskt, kommer kryssrutan inte att markeras för denna kontroll.
Om koden exekveras framgångsrikt kommer följande utdata att visas när du kör din kod i webbläsaren.
Produktion:
Från utgången,
- Det kan tydligt ses att värdet som tilldelas variabeln pName är "Guru99"
- Eftersom det första kontrollvärdet är "true" det passerade, är kryssrutan markerad för "Controllers" kryssrutan. På samma sätt, eftersom det andra värdet är falskt, är kryssrutan inte markerad för kryssrutan "Modeller".
3) Välj element från rullgardinsmenyn
ng-modelldirektivet kan också tillämpas på select-elementet och användas för att fylla i listobjekten i urvalslistan.
Låt oss titta på ett exempel på hur vi kan använda ng-modellen med typen select input.
Här kommer vi att ha en textinmatningstyp som kommer att ha namnet "Guru99" och det kommer att finnas en vallista med 2 listobjekt av "Controller" och "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>
- Smakämnen ng-modelldirektivet används för att bifoga medlemsvariabeln som heter "Ämnen" till kontrollen för val av typ. Inuti väljarkontrollen, för vart och ett av alternativen, bifogar vi medlemsvariabeln Topics.option1 för det första alternativet och Topics.option2 för det andra alternativet.
- Här definierar vi vår Topics-arrayvariabel som innehåller 2 nyckel-värdepar. Det första paret har värdet "Controllers" och det andra har värdet "Models". Dessa värden kommer att skickas för att välja indatatagg i vyn. Om koden exekveras framgångsrikt kommer följande utdata att visas.
Produktion:
Från utgången kan det ses att värdet som tilldelas variabeln pName är "Guru99" och vi kan se att kontrollen för val av ingång har alternativen "Kontroller" och "Modeller".
Sammanfattning
- Modeller i Angular JS representeras av ng-modelldirektivet. Det primära syftet med detta direktiv är att binda synen till modellen. Hur man bygger en enkel styrenhet med hjälp av direktiven ng-app, ng-controller och ng-modell.
- ng-modelldirektivet kan kopplas till en "textområde"-inmatningskontroll och flerradssträngar kan skickas från styrenheten till vyn.
- ng-modelldirektivet kan kopplas till inmatningskontroller som text- och kryssrutekontroller för att göra dem mer dynamiska under körning.
- ng-modelldirektivet kan också användas för att fylla i en urvalslista med alternativ som kan visas för användaren.
