Daten in AngularJS Bindung ist die Synchronisation zwischen dem Modell und der Ansicht.
Datenmodell
AngularJS Anwendungen in der Regel ein Datenmodell haben. Das Datenmodell ist eine Sammlung von Daten für die Anwendung verfügbar.
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 die Ansicht genannt.
Die Aussicht hat Zugriff auf das Modell, und es gibt mehrere Möglichkeiten der Modelldaten in der Ansicht angezeigt wird.
Sie können die Verwendung ng-bind - Richtlinie, die die Innerhtml des Elements mit dem angegebenen Modelleigenschaft binden:
Sie können auch doppelt geschweiften Klammern {{ }} {{ }} {{ }} Inhalte aus dem Modell anzuzeigen:
Oder können Sie mit dem ng-model Richtlinie über HTML steuert das Modell der Ansicht zu binden.
Die ng-model Richtlinie
Verwenden Sie die ng-model Richtlinie zu binden Daten aus dem Modell zur Ansicht auf HTML - Steuerelemente (input, select, TextArea-)
Die ng-model Richtlinie sieht eine Zwei-Wege - Bindung zwischen dem Modell und der Ansicht.
Zwei-Wege-Bindung
Daten in AngularJS Bindung ist die Synchronisation zwischen dem Modell und der Ansicht.
Wenn Daten in das Modell ändert, spiegelt die Ansicht , die die Veränderung, und als Daten in der Ansicht ändert, wird das Modell ebenfalls aktualisiert. Dies geschieht sofort und automatisch, was dafür sorgt, 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>
Versuch es selber " AngularJS-Controller
Anwendungen in AngularJS werden von Controllern gesteuert. Lesen Sie mehr über Controller in der AngularJS Controller Kapitel.
Wegen der sofortigen Synchronisation des Modells und der Ansicht kann der Regler vollständig aus der Sicht getrennt werden und einfach auf die Modelldaten konzentrieren. Dank der Daten in AngularJS Bindung wird die Ansicht alle Änderungen in der Steuerung vorgenommen reflektieren.
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.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>
Versuch es selber "