Hoe “ng-model” te gebruiken in AngularJS met VOORBEELDEN
James Hartman
Wat is ng-model in AngularJs?
ng-model is een richtlijn in Angular.JS die modellen vertegenwoordigt en het primaire doel is om de “view” aan het “model” te binden.
Stel bijvoorbeeld dat u een eenvoudige pagina aan de eindgebruiker wilt presenteren zoals hieronder, waarin de gebruiker wordt gevraagd om de "Voornaam" en "Achternaam" in tekstvakken in te voeren. En dan wilt u ervoor zorgen dat u de informatie die de gebruiker heeft ingevoerd in uw datamodel opslaat.
U kunt de ng-model-richtlijn gebruiken om de tekstvakvelden van 'Voornaam' en 'Achternaam' toe te wijzen aan uw datamodel.
De ng-model-richtlijn zorgt ervoor dat de gegevens in de 'view' en die van uw 'model' de hele tijd gesynchroniseerd blijven.
Het ng-modelkenmerk
Zoals besproken in de inleiding van dit hoofdstuk, wordt het ng-model attribuut gebruikt om de gegevens in uw model te binden aan de weergave die aan de gebruiker wordt gepresenteerd.
Het ng-model attribuut wordt gebruikt voor,
- Bindende bedieningselementen zoals invoer, tekstgebied en selecties in de weergave in het model.
- Zorg voor een validatiegedrag: er kan bijvoorbeeld een validatie aan een tekstvak worden toegevoegd, zodat er alleen numerieke tekens in het tekstvak kunnen worden ingevoerd.
- Het ng-model-attribuut onderhoudt de status van de controle (met status bedoelen we dat de controle en de gegevens altijd synchroon moeten blijven. Als de waarde van onze gegevens verandert, verandert de waarde in de controle automatisch en vice versa)
Hoe het ng-model te gebruiken
1) Tekstgebied
De tekstgebiedtag wordt gebruikt om een besturingselement voor tekstinvoer met meerdere regels te definiëren. Het tekstgebied kan een onbeperkt aantal tekens bevatten en de tekst wordt weergegeven in een lettertype met een vaste breedte.
Laten we nu eens kijken naar een eenvoudig voorbeeld van hoe we de ng-modelrichtlijn aan een tekstgebiedbesturingselement kunnen toevoegen.
In dit voorbeeld willen we laten zien hoe we een tekenreeks met meerdere regels van de controller naar de weergave kunnen doorgeven en die waarde aan het tekstgebiedbesturingselement kunnen koppelen.
<!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 Verklaring:
- De ng-modelrichtlijn wordt gebruikt om de lidvariabele genaamd “pDescription” naar het “textarea”-besturingselement. De “pDescription”-variabele zal feitelijk de tekst bevatten, die zal worden doorgegeven aan het tekstgebiedbesturingselement. We hebben ook twee attributen genoemd voor het besturingselement tekstgebied, namelijk rijen=2 en cols=4. Deze attributen zijn vermeld zodat we meerdere regels tekst kunnen weergeven. Door deze attributen te definiëren zal het tekstgebied nu 50 rijen en 4 kolommen hebben, zodat het meerdere regels tekst kan tonen.
- Hier koppelen we de membervariabele aan het scopeobject met de naam “pDescription” en een tekenreekswaarde aan de variabele toevoegen.
- Let op dat we de /n-literal in de string plaatsen, zodat de tekst uit meerdere regels kan bestaan wanneer deze in het tekstgebied wordt weergegeven. De /n-literal splitst de tekst in meerdere regels, zodat deze in het besturingselement textarea kan worden weergegeven als meerdere regels tekst.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u de code in de browser uitvoert.
Output:
Van de uitvoer,
- Het is duidelijk te zien dat de waarde die aan de pDescription-variabele als onderdeel van het scope-object is doorgegeven aan het textarea-besturingselement.
- Vervolgens wordt het weergegeven wanneer de pagina wordt geladen.
2) Invoerelementen
De ng-model-richtlijn kan ook worden toegepast op de invoerelementen, zoals het tekstvak, selectievakjes, keuzerondjes, enz.
Laten we eens kijken naar een voorbeeld van hoe we het ng-model kunnen gebruiken met de invoertypen “tekstvak” en “selectievakje”.
Hier hebben we een tekstinvoertype met de naam "Guru99" en er zullen 2 selectievakjes zijn, waarvan er één standaard is aangevinkt en de andere niet.
<!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 Verklaring:
- De ng-modelrichtlijn wordt gebruikt om de lidvariabele genaamd “pname” aan het tekstbesturingselement voor het invoertype te koppelen. De variabele “pname” zal de tekst van “Guru99” bevatten, die zal worden doorgegeven aan het tekstinvoerbesturingselement. Merk op dat elke naam kan worden gegeven aan de naam van de lidvariabele.
- Hier definiëren we onze eerste checkbox “Controllers” die is gekoppeld aan de lidvariabele Topics.Controllers. De checkbox wordt gemarkeerd voor deze check control.
- Hier definiëren we ons eerste selectievakje "Models" dat is gekoppeld aan de lidvariabele Topics.Models. Het selectievakje wordt niet gemarkeerd voor deze controle.
- Hier voegen we de lidvariabele met de naam “pName” toe en plaatsen we een tekenreekswaarde van “Guru99”.
- We declareren een lid-arrayvariabele genaamd "Topics" en geven deze twee waarden, de eerste is "true" en de tweede is "false". Dus wanneer het eerste selectievakje de waarde true krijgt, wordt het selectievakje voor dit besturingselement gemarkeerd, en omdat de tweede waarde false is, wordt het selectievakje voor dit besturingselement niet gemarkeerd.
Als de code succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.
Output:
Van de uitvoer,
- Het is duidelijk te zien dat de waarde die aan de pName-variabele is toegewezen “Guru99” is
- Omdat de eerste controlewaarde "true" is, is het geslaagd, het selectievakje is gemarkeerd voor het selectievakje "Controllers". En omdat de tweede waarde false is, is het selectievakje niet gemarkeerd voor het selectievakje "Models".
3) Selecteer een element uit de vervolgkeuzelijst
De ng-modelrichtlijn kan ook worden toegepast op het select-element en worden gebruikt om de lijstitems in de select-lijst te vullen.
Laten we een voorbeeld bekijken van hoe we het ng-model kunnen gebruiken met het geselecteerde invoertype.
Hier hebben we een tekstinvoertype met de naam “Guru99” en er zal een selectielijst zijn met 2 lijstitems van “Controller” en “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>
- De ng-modelrichtlijn wordt gebruikt om de lidvariabele genaamd “Topics” aan het besturingselement Select Type te koppelen. Binnen het selectiebesturingselement voegen we voor elk van de opties de lidvariabele Topics.option1 toe voor de eerste optie en Topics.option2 voor de tweede optie.
- Hier definiëren we onze Topics array variabele die 2 key-value paren bevat. Het eerste paar heeft de waarde "Controllers" en het tweede heeft de waarde "Models". Deze waarden worden doorgegeven aan de select input tag in de view. Als de code succesvol wordt uitgevoerd, wordt de volgende Output getoond.
Output:
Uit de uitvoer blijkt dat de waarde die aan de pName-variabele is toegewezen “Guru99” is en we kunnen zien dat het selectie-invoerbesturingselement de opties “Controllers” en “Models” heeft.
Samenvatting
- Modellen in Angular JS worden weergegeven door de ng-modelrichtlijn. Het primaire doel van deze richtlijn is om de visie aan het model te binden. Hoe je een eenvoudige controller bouwt met behulp van de ng-app-, ng-controller- en ng-model-richtlijnen.
- De ng-modelrichtlijn kan worden gekoppeld aan een invoercontrole voor een “tekstgebied” en strings met meerdere regels kunnen van de controller naar de weergave worden doorgegeven.
- De ng-model-richtlijn kan worden gekoppeld aan invoerbesturingselementen zoals de tekst- en selectievakjesbesturingselementen om ze dynamischer te maken tijdens runtime.
- De ng-model-richtlijn kan ook worden gebruikt om een selectielijst te vullen met opties die aan de gebruiker kunnen worden weergegeven.
