La liaison de données dans AngularJS est la synchronisation entre le modèle et la vue.
Modèle de données
AngularJS applications ont généralement un modèle de données. Le modèle de données est un ensemble de données disponibles pour l'application.
Exemple
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
HTML Voir
Le conteneur HTML lorsque la demande AngularJS est affiché, est appelé le point de vue.
La vue a accès au modèle, et il y a plusieurs façons d'afficher les données du modèle dans la vue.
Vous pouvez utiliser le ng-bind directive, qui se liera le innerHTML de l'élément à la propriété de modèle spécifié:
Vous pouvez également utiliser des accolades doubles {{ }} {{ }} {{ }} Pour afficher le contenu du modèle:
Ou vous pouvez utiliser le ng-model directive sur les contrôles HTML pour lier le modèle à la vue.
Le ng-model directive
Utilisez le ng-model directive pour lier des données à partir du modèle à la vue sur les contrôles HTML (entrée, sélectionnez, textarea)
Le ng-model directive fournit une liaison entre le modèle et la vue dans les deux sens.
Deux voies de reliure
La liaison de données dans AngularJS est la synchronisation entre le modèle et la vue.
Lorsque les données dans les changements de modèle, la vue reflète le changement, et lorsque des données dans la vue change, le modèle est mis à jour aussi bien. Cela se produit immédiatement et automatiquement, ce qui fait en sorte que le modèle et la vue est mis à jour à tout moment.
Exemple
<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>
Essayez - le vous - même » AngularJS Controller
Applications en AngularJS sont contrôlés par les contrôleurs. Lisez à propos de contrôleurs du AngularJS Contrôleurs chapitre.
En raison de la synchronisation immédiate du modèle et la vue, le contrôleur peut être complètement séparé de la vue, et de se concentrer uniquement sur les données du modèle. Merci à la liaison de données dans AngularJS, la vue de refléter les modifications apportées dans le contrôleur.
Exemple
<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>
Essayez - le vous - même »