AngularJS-Datenbindung

Die Datenbindung in AngularJS ist die Synchronisation zwischen Modell und Ansicht.

Datenmodell

Eine AngularJS-Anwendung hat in der Regel ein Datenmodell. Das Datenmodell ist eine Sammlung von Daten, die für die Anwendung verfügbar sind.

Beispiel

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

HTML-Ansicht

Der HTML-Container für die AngularJS-Anwendung wird als Ansicht bezeichnet.

Die Ansicht kann auf das Modell zugreifen und gibt es mehrere Möglichkeiten, Modelldaten in der Ansicht anzuzeigen.

Sie können ng-bind Anweisung, die den innerHTML des Elements an die angegebene Modellattribut bindet:

Beispiel

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

Selbst ausprobieren

Sie können auch doppelte eckige Klammern verwenden {{ }} verwenden, um den Inhalt im Modell anzuzeigen:

Beispiel

<p>First name: {{firstname}}</p>

Selbst ausprobieren

oder Sie können ng-model Anweisungen binden das Modell an die Ansicht.

ng-model-Anweisung

Verwenden Sie ng-model Anweisungen binden die Daten im Modell an die Ansicht der HTML-Kontrollen (input, select, textarea).

Beispiel

<input ng-model="firstname">

Selbst ausprobieren

ng-model Anweisungen bieten eine bidirektionale Bindung zwischen Modell und Ansicht.

Doppelte Bindung

Die Datenbindung in AngularJS ist die Synchronisation zwischen Modell und Ansicht.

Wenn sich die Daten im Modell ändern, wird die Ansicht diese Änderung wider spiegeln, und wenn sich die Daten in der Ansicht ändern, wird auch das Modell aktualisiert. Dies geschieht sofort und automatisch, um sicherzustellen, dass Modell und Ansicht stets aktualisiert werden.

Beispiel

<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 = "Bill";
  $scope.lastname = "Gates";
});
</script>

Selbst ausprobieren

AngularJS-Controller

Die Anwendung in AngularJS wird von Controllern gesteuert. Lesen Sie bitte das Kapitel über Controller im AngularJS-Kapitel über Controller.

Durch die sofortige Synchronisation von Modell und Ansicht kann der Controller vollständig vom Ansicht getrennt werden und sich nur auf die Modelldaten konzentrieren. Aufgrund der Datenbindung in AngularJS wird die Ansicht alle Änderungen im Controller wider spiegeln.

Beispiel

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

Selbst ausprobieren