Wiązanie danych AngularJS
Wiązanie danych w AngularJS to synchronizacja między modelem a widokiem.
Model danych
Aplikacje AngularJS zwykle mają model danych. Model danych to zbiór danych dostępnych dla aplikacji.
Przykład
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
Widok HTML
Kontener HTML, w którym wyświetlana jest aplikacja AngularJS, nazywa się widokiem.
Widok ma dostęp do modelu i istnieje kilka sposobów wyświetlania danych modelu w widoku.
Możesz użyć ng-binddyrektywy, która powiąże innerHTML elementu z określoną właściwością modelu:
Przykład
<p ng-bind="firstname"></p>
Możesz również użyć podwójnych nawiasów klamrowych , aby wyświetlić zawartość z modelu:{{ }}
Przykład
<p>First name: {{firstname}}</p>
Możesz też użyć ng-modeldyrektywy w kontrolkach HTML, aby powiązać model z widokiem.
ng-modelDyrektywa _
Użyj ng-modeldyrektywy, aby powiązać dane z modelu z widokiem w kontrolkach HTML (input, select, textarea)
Przykład
<input ng-model="firstname">
Dyrektywa ng-modelzapewnia dwukierunkowe powiązanie między modelem a widokiem.
Wiązanie dwukierunkowe
Wiązanie danych w AngularJS to synchronizacja między modelem a widokiem.
Gdy dane w modelu ulegną zmianie , widok odzwierciedla zmianę, a gdy dane w widoku ulegną zmianie, model również zostanie zaktualizowany. Dzieje się to natychmiast i automatycznie, dzięki czemu model i widok są stale aktualizowane.
Przykład
<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>
Kontroler AngularJS
Aplikacje w AngularJS są kontrolowane przez kontrolery. Przeczytaj o kontrolerach w rozdziale Kontrolery AngularJS .
Dzięki natychmiastowej synchronizacji modelu i widoku, sterownik może być całkowicie oddzielony od widoku i po prostu skoncentrować się na danych modelu. Dzięki powiązaniu danych w AngularJS widok będzie odzwierciedlał wszelkie zmiany wprowadzone w kontrolerze.
Przykład
<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>