Associazione dati AngularJS
Il data binding in AngularJS è la sincronizzazione tra il modello e la vista.
Modello di dati
Le applicazioni AngularJS di solito hanno un modello di dati. Il modello di dati è una raccolta di dati disponibili per l'applicazione.
Esempio
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
Vista HTML
Il contenitore HTML in cui viene visualizzata l'applicazione AngularJS è chiamato vista.
La vista ha accesso al modello e sono disponibili diversi modi per visualizzare i dati del modello nella vista.
È possibile utilizzare la ng-binddirettiva, che legherà l'innerHTML dell'elemento alla proprietà del modello specificata:
Esempio
<p ng-bind="firstname"></p>
Puoi anche utilizzare le parentesi doppie per visualizzare il contenuto del modello:{{ }}
Esempio
<p>First name: {{firstname}}</p>
Oppure puoi usare la ng-modeldirettiva sui controlli HTML per associare il modello alla vista.
La ng-modelDirettiva
Utilizzare la ng-modeldirettiva per associare i dati dal modello alla vista sui controlli HTML (input, select, textarea)
Esempio
<input ng-model="firstname">
La ng-modeldirettiva prevede un legame bidirezionale tra il modello e la vista.
Rilegatura a due vie
Il data binding in AngularJS è la sincronizzazione tra il modello e la vista.
Quando i dati nel modello cambiano, la vista riflette la modifica e quando i dati nella vista cambiano, anche il modello viene aggiornato. Ciò avviene immediatamente e automaticamente, assicurando che il modello e la vista siano sempre aggiornati.
Esempio
<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>
Controller AngularJS
Le applicazioni in AngularJS sono controllate dai controller. Leggi i controller nel capitolo Controller AngularJS .
Grazie all'immediata sincronizzazione del modello e della vista, il controller può essere completamente separato dalla vista e concentrarsi semplicemente sui dati del modello. Grazie all'associazione dei dati in AngularJS, la vista rifletterà tutte le modifiche apportate 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
= "John";
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>