Data binding AngularJS

La binding dei dati in AngularJS è la sincronizzazione tra modello e vista.

Modello di dati

L'applicazione AngularJS di solito ha un modello di dati. Il modello di dati è la raccolta di dati disponibili per l'applicazione.

Esempio

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

Vista HTML

Il contenitore HTML dell'applicazione AngularJS è chiamato vista.

La vista può accedere al modello e ci sono diversi modi per visualizzare i dati del modello nella vista.

Puoi usare ng-bind direttiva, che binding l'innerHTML dell'elemento al modello specificato:

Esempio

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

Prova tu stesso

Puoi anche usare {{ }} per visualizzare il contenuto del modello:

Esempio

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

Prova tu stesso

O puoi usare ng-model La direttiva binding il modello alla vista.

direttiva ng-model

Utilizzando ng-model La direttiva binding i dati del modello alla vista di controlli HTML (input, select, textarea).

Esempio

<input ng-model="firstname">

Prova tu stesso

ng-model Le direttive forniscono una binding bidirezionale tra modello e vista.

Binding bidirezionale

La binding dei dati in AngularJS è la sincronizzazione tra modello e vista.

Quando i dati del modello cambiano, la vista riflette questa modifica e quando i dati nella vista cambiano, il modello viene aggiornato. Questo avviene immediatamente e automaticamente, assicurando che modello e vista siano sempre aggiornati.

Esempio

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

Prova tu stesso

Controller AngularJS

L'applicazione AngularJS è controllata dal controller. Leggi il capitolo sul controller in AngularJS per ulteriori informazioni.

Grazie alla sincronizzazione immediata tra modello e vista, il controller può essere completamente separato e concentrarsi solo sui dati del modello. Grazie alla binding dei dati in AngularJS, la vista rifletterà qualsiasi modifica effettuata nel controller.

Esempio

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

Prova tu stesso