AngularJS-gegevensbinding
Databinding in AngularJS is de synchronisatie tussen het model en de view.
Gegevensmodel
AngularJS-applicaties hebben meestal een datamodel. Het datamodel is een verzameling gegevens die beschikbaar zijn voor de applicatie.
Voorbeeld
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
HTML-weergave
De HTML-container waarin de AngularJS-applicatie wordt weergegeven, wordt de view genoemd.
De weergave heeft toegang tot het model en er zijn verschillende manieren om modelgegevens in de weergave weer te geven.
U kunt de ng-bindrichtlijn gebruiken, die de innerHTML van het element bindt aan de opgegeven modeleigenschap:
Voorbeeld
<p ng-bind="firstname"></p>
U kunt ook dubbele accolades gebruiken om inhoud uit het model weer te geven:{{ }}
Voorbeeld
<p>First name: {{firstname}}</p>
Of u kunt de ng-modelinstructie over HTML-besturingselementen gebruiken om het model aan de weergave te binden.
de ng-modelrichtlijn
Gebruik de ng-modelrichtlijn om gegevens van het model te binden aan de weergave op HTML-besturingselementen (invoer, selectie, tekstgebied)
Voorbeeld
<input ng-model="firstname">
De ng-modelrichtlijn zorgt voor een wederzijdse binding tussen het model en de weergave.
Tweerichtingsbinding
Databinding in AngularJS is de synchronisatie tussen het model en de view.
Wanneer gegevens in het model veranderen, weerspiegelt de weergave de wijziging, en wanneer gegevens in de weergave veranderen, wordt het model ook bijgewerkt. Dit gebeurt direct en automatisch, waardoor het model en de weergave altijd up-to-date zijn.
Voorbeeld
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="firstname">
<h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
</script>
AngularJS-controller
Applicaties in AngularJS worden aangestuurd door controllers. Lees over controllers in het hoofdstuk AngularJS Controllers .
Door de directe synchronisatie van het model en de weergave kan de controller volledig worden gescheiden van de weergave en zich eenvoudig concentreren op de modelgegevens. Dankzij de gegevensbinding in AngularJS zal de weergave eventuele wijzigingen in de controller weergeven.
Voorbeeld
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-click="changeName()">{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>