AngularJS data binding

Databinding i AngularJS er synkronisering mellem model og view.

Datamodel

En AngularJS-applikation har normalt en datamodel. Datamodellen er en samling af data, der kan bruges i applikationen.

eksempel

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

HTML-view

HTML-kontaineret, der bruges til AngularJS-applikationen, kaldes view.

View kan få adgang til modellen, og der er flere måder at vise modeldata i view på.

Du kan bruge ng-bind Instruktionen, som binder elementets innerHTML til den angivne modelegenskab:

eksempel

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

Prøv det selv

Du kan også bruge dobbelte curly parenteser {{ }} for at vise indholdet i modellen:

eksempel

<p>Første navn: {{firstname}}</p>

Prøv det selv

eller brug ng-model Instruktionen binder modellen til view.

ng-model-instruktionen

Brug ng-model Instruktionen binder data fra modellen til view på HTML-kontroller (input, select, textarea).

eksempel

<input ng-model="firstname">

Prøv det selv

ng-model Instruktioner tilbyder dobbeltretning mellem model og view.

Dobbeltretning

Databinding i AngularJS er synkronisering mellem model og view.

Når dataene i modellen ændres, reflekterer view denne ændring, og når dataene i view ændres, opdateres modellen også. Dette sker øjeblikkeligt og automatisk, hvilket sikrer, at både model og view altid er opdaterede.

eksempel

<div ng-app="myApp" ng-controller="myCtrl">
  Navn: <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>

Prøv det selv

AngularJS controller

En AngularJS-applikation styres af controlleren. Læs mere om controller i kapitlet om controller i AngularJS.

På grund af den øjeblikkelige synkronisering mellem model og view kan controlleren fuldstændigt adskilles fra view og kun fokusere på modeldataene. Takket være databinding i AngularJS vil view reflektere alle ændringer, der foretages i controlleren.

eksempel

<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>

Prøv det selv