Richtlijn AngularJS-model
De ng-model-richtlijn bindt de waarde van HTML-besturingselementen (invoer, selectie, tekstgebied) aan toepassingsgegevens.
De modellenrichtlijn
Met de ng-modelrichtlijn kun je de waarde van een invoerveld binden aan een variabele die is gemaakt in AngularJS.
Voorbeeld
<div ng-app="myApp" ng-controller="myCtrl">
Name:
<input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name
= "John Doe";
});
</script>
Tweerichtingsbinding
De binding gaat twee kanten op. Als de gebruiker de waarde in het invoerveld wijzigt, verandert de eigenschap AngularJS ook de waarde ervan:
Voorbeeld
<div ng-app="myApp" ng-controller="myCtrl">
Name:
<input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
Gebruikersinvoer valideren
De ng-modelrichtlijn kan typevalidatie bieden voor toepassingsgegevens (nummer, e-mail, vereist):
Voorbeeld
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail
address</span>
</form>
In het bovenstaande voorbeeld wordt de span alleen weergegeven als de expressie in het ng-showattribuut retourneert true.
Als de eigenschap in het ng-modelattribuut niet bestaat, zal AngularJS er een voor u maken.
Applicatiestatus
De ng-modelrichtlijn kan de status van toepassingsgegevens geven (geldig, vies, aangeraakt, fout):
Voorbeeld
<form ng-app="" name="myForm" ng-init="myText = '[email protected]'">
Email:
<input type="email" name="myAddress" ng-model="myText"
required>
<h1>Status</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
CSS-klassen
De ng-modelrichtlijn biedt CSS-klassen voor HTML-elementen, afhankelijk van hun status:
Voorbeeld
<style>
input.ng-invalid {
background-color:
lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Enter your name:
<input name="myName" ng-model="myText" required>
</form>
De ng-modelrichtlijn voegt de volgende klassen toe/verwijdert, afhankelijk van de status van het formulierveld:
- van-leeg
- van-niet-leeg
- ontroerd
- van-onaangeroerd
- van-geldig
- van-ongeldig
- van-vuile
- ng-in afwachting
- van ongerepte