Liens de données AngularJS

La liaison de données en AngularJS est une synchronisation entre le modèle et la vue.

Modèle de données

Une application AngularJS possède généralement un modèle de données. Le modèle de données est une collection de données disponibles pour l'application.

Exemple

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

Vue HTML

Le conteneur HTML de l'application AngularJS est appelé vue.

La vue peut accéder au modèle et il existe plusieurs façons d'afficher les données du modèle dans la vue.

Vous pouvez utiliser ng-bind L'instruction, qui lie l'innerHTML de l'élément à l'attribut de modèle spécifié :

Exemple

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

Essayer vous-même

Vous pouvez également utiliser {{ }} pour afficher le contenu du modèle :

Exemple

<p>Nom: {{firstname}}</p>

Essayer vous-même

Ou, vous pouvez utiliser ng-model L'instruction lie le modèle à la vue.

Instruction ng-model

Utilisation ng-model Les instructions lient les données du modèle à la vue des contrôles HTML (input, select, textarea).

Exemple

<input ng-model="firstname">

Essayer vous-même

ng-model Les instructions fournissent une liaison bidirectionnelle entre le modèle et la vue.

Liaison bidirectionnelle

La liaison de données en AngularJS est une synchronisation entre le modèle et la vue.

Lorsque les données du modèle changent, la vue reflète cette modification, et lorsque les données de la vue changent, le modèle est également mis à jour. Cela se produit immédiatement et automatiquement, assurant ainsi que le modèle et la vue sont toujours à jour.

Exemple

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

Essayer vous-même

Contrôleurs AngularJS

L'application AngularJS est contrôlée par le contrôleur. Veuillez lire à propos du contrôleur dans le chapitre sur les contrôleurs en AngularJS.

Grâce à la synchronisation immédiate entre le modèle et la vue, le contrôleur peut être complètement séparé de la vue et ne doit se concentrer que sur les données du modèle. Grâce à la liaison de données dans AngularJS, la vue reflétera tout changement effectué 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.firstname = "Bill";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

Essayer vous-même