AngularJS databindning

Data-binding i AngularJS är synkronisering mellan modell och vy.

Data-modell

AngularJS-applikationer har vanligtvis en data-modell. Data-modellen är en samling av data som är tillgängliga för applikationen.

exempel

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

HTML-vy

HTML-kontainerna för AngularJS-applikationer kallas vyer.

Vyer kan komma åt modellen och det finns flera sätt att visa modelldata i vyer.

Du kan använda ng-bind Instruktionen, som binder elements innerHTML till angivna modellattribut:

exempel

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

Prova själv

Du kan också använda dubbla klamrar {{ }} för att visa innehållet i modellen:

exempel

<p>Förnamn: {{firstname}}</p>

Prova själv

Eller kan du använda ng-model Instruktionen binder modellen till vyn.

ng-model-instruktionen

Använd ng-model Instruktioner binder data från modellen till vyn på HTML-kontroller (input, select, textarea).

exempel

<input ng-model="firstname">

Prova själv

ng-model Instruktioner tillhandahåller dubbelbindning mellan modell och vy.

Dubbelbindning

Data-binding i AngularJS är synkronisering mellan modell och vy.

När data i modellen förändras återspeglar vyer denna förändring, och när data i vyer förändras uppdateras modellen. Detta sker omedelbart och automatiskt, vilket säkerställer att modellen och vyer alltid hålls uppdaterade.

exempel

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

Prova själv

AngularJS kontroller

Applikationer i AngularJS kontrolleras av kontrollern. Läs mer om kontrollern i kapitlet om AngularJS-kontrollern.

Eftersom modellen och vyer synkroniseras omedelbart, kan kontrollern helt separeras från vyer och fokusera endast på modelldata. På grund av data-binding i AngularJS kommer vyer att återspegla alla ändringar som görs i kontrollern.

exempel

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

Prova själv