AngularJS Data Binding

Data-binding in AngularJS is de synchronisatie tussen model en view.

Datamodel

Een AngularJS-applicatie heeft meestal een datamodel. Een datamodel is een verzameling gegevens die beschikbaar zijn voor de applicatie.

Voorbeeld

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});

HTML-view

De HTML-container van de AngularJS-applicatie wordt de view genoemd.

De view kan toegang krijgen tot het model, en er zijn verschillende manieren om modelgegevens in de view weer te geven.

U kunt ng-bind instructie, die de innerHTML van het element koppelt aan de opgegeven modeleigenschap:

Voorbeeld

<p ng-bind="firstname"></p>

Probeer het zelf

U kunt ook dubbele accolades gebruiken {{ }} gebruiken om de inhoud van het model weer te geven:

Voorbeeld

<p>Voornaam: {{firstname}}</p>

Probeer het zelf

Of u kunt ng-model Instructies koppelen het model aan de view.

ng-model instructie

Gebruik ng-model Instructies koppelen de gegevens in het model aan de view van HTML-kaders (input, select, textarea).

Voorbeeld

<input ng-model="firstname">

Probeer het zelf

ng-model Instructies bieden een dubbelzijdige binding tussen model en view.

Dubbelzijdige binding

Data-binding in AngularJS is de synchronisatie tussen model en view.

Wanneer de gegevens in het model veranderen, reflecteert de view deze verandering, en wanneer de gegevens in de view veranderen, wordt het model ook bijgewerkt. Dit gebeurt onmiddellijk en automatisch, zodat het model en de view altijd worden bijgewerkt.

Voorbeeld

<div ng-app="myApp" ng-controller="myCtrl">
  Naam: <input ng-model="firstname">
  <h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});
</script>

Probeer het zelf

AngularJS Controllers

De applicatie in AngularJS wordt bestuurd door controllers. Lees meer over controllers in het hoofdstuk over AngularJS controllers.

Omdat de onmiddellijke synchronisatie tussen model en view, kan de controller volledig van de view worden gescheiden en zich alleen richten op de modelgegevens. Vanwege de data-binding in AngularJS, zal de view elke wijziging die in de controller wordt gedaan, weerspiegelen.

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 = "Bill";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

Probeer het zelf