AngularJS-Datenbindung
Die Datenbindung in AngularJS ist die Synchronisation zwischen dem Modell und der Ansicht.
Datenmodell
AngularJS-Anwendungen haben normalerweise 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
= "John";
$scope.lastname = "Doe";
});
HTML-Ansicht
Der HTML-Container, in dem die AngularJS-Anwendung angezeigt wird, wird View genannt.
Die Ansicht hat Zugriff auf das Modell, und es gibt mehrere Möglichkeiten, Modelldaten in der Ansicht anzuzeigen.
Sie können die ng-bindDirektive verwenden, die das innerHTML des Elements an die angegebene Modelleigenschaft bindet:
Beispiel
<p ng-bind="firstname"></p>
Sie können auch doppelte Klammern verwenden , um Inhalte aus dem Modell anzuzeigen:{{ }}
Beispiel
<p>First name: {{firstname}}</p>
Oder Sie können die ng-modelDirektive für HTML-Steuerelemente verwenden, um das Modell an die Ansicht zu binden.
Die ng-modelRichtlinie
Verwenden Sie die ng-modelDirektive, um Daten aus dem Modell an die Ansicht von HTML-Steuerelementen (Eingabe, Auswahl, Textbereich) zu binden.
Beispiel
<input ng-model="firstname">
Die ng-modelDirektive stellt eine bidirektionale Bindung zwischen dem Modell und der Ansicht bereit.
Zwei-Wege-Bindung
Die Datenbindung in AngularJS ist die Synchronisation zwischen dem Modell und der Ansicht.
Wenn sich Daten im Modell ändern, spiegelt die Ansicht die Änderung wider, und wenn sich Daten in der Ansicht ändern, wird auch das Modell aktualisiert. Dies geschieht sofort und automatisch, wodurch sichergestellt wird, dass das Modell und die Ansicht jederzeit 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
= "John";
$scope.lastname = "Doe";
});
</script>
AngularJS-Controller
Anwendungen in AngularJS werden von Controllern gesteuert. Lesen Sie mehr über Controller im Kapitel AngularJS-Controller .
Durch die sofortige Synchronisation von Model und View kann der Controller komplett von der View getrennt werden und sich einfach auf die Modelldaten konzentrieren. Dank der Datenbindung in AngularJS spiegelt die Ansicht alle Änderungen wider, die im Controller vorgenommen wurden.
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
= "John";
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>