I dati vincolante AngularJS è la sincronizzazione tra il modello e la vista.
Data Model
AngularJS applicazioni di solito hanno un modello di dati. Il modello di dati è un insieme di dati disponibili per l'applicazione.
Esempio
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
HTML View
Il contenitore HTML in cui viene visualizzata l'applicazione AngularJS, si chiama la vista.
La vista ha accesso al modello, e ci sono diversi modi di visualizzare i dati del modello nella vista.
È possibile utilizzare il ng-bind direttiva, che legherà il innerHTML dell'elemento alla proprietà modello specificato:
È inoltre possibile utilizzare doppie parentesi graffe {{ }} {{ }} {{ }} Per visualizzare il contenuto dal modello:
In alternativa è possibile utilizzare il ng-model direttiva sulla HTML controlli per legare il modello per la vista.
Il ng-model direttiva
Utilizzare il ng-model direttiva per associare i dati dal modello alla vista sui controlli HTML (input, selezionare, textarea)
Il ng-model direttiva prevede un legame tra il modello e la vista a due vie.
Bidirezionale Binding
I dati vincolante AngularJS è la sincronizzazione tra il modello e la vista.
Quando i dati nel modello cambia, la vista riflette il cambiamento, e quando i dati in vista cambia, il modello viene aggiornato pure. Questo avviene immediatamente e automaticamente, il che fa in modo che il modello e la vista viene aggiornato in ogni momento.
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>
Prova tu stesso " AngularJS controller
Applicazioni in AngularJS sono controllati dai controllori. Leggi i controllori del AngularJS Controllers capitolo.
A causa della sincronizzazione immediata del modello e la vista, il controller può essere completamente separata dalla vista, e semplicemente concentrarsi sui dati del modello. Grazie ai dati vincolanti in AngularJS, la vista rifletterà 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.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>
Prova tu stesso "