AngularJS Data Binding
Datová vazba v AngularJS je synchronizace mezi modelem a pohledem.
Datový model
Aplikace AngularJS obvykle mají datový model. Datový model je soubor dat dostupných pro aplikaci.
Příklad
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
HTML zobrazení
HTML kontejner, kde je zobrazena aplikace AngularJS, se nazývá pohled.
Pohled má přístup k modelu a existuje několik způsobů, jak v pohledu zobrazit data modelu.
Můžete použít ng-binddirektivu, která sváže innerHTML prvku se zadanou vlastností modelu:
Příklad
<p ng-bind="firstname"></p>
K zobrazení obsahu z modelu můžete také použít dvojité závorky :{{ }}
Příklad
<p>First name: {{firstname}}</p>
Nebo můžete použít ng-modeldirektivu pro ovládací prvky HTML k propojení modelu s pohledem.
Směrnice ng-model_
Použijte ng-modeldirektivu k propojení dat z modelu s pohledem na ovládací prvky HTML (vstup, výběr, textová oblast)
Příklad
<input ng-model="firstname">
Směrnice ng-modelposkytuje obousměrnou vazbu mezi modelem a pohledem.
Oboustranná vazba
Datová vazba v AngularJS je synchronizace mezi modelem a pohledem.
Když se změní data v modelu , pohled odráží změnu, a když se změní data v pohledu , model se také aktualizuje. To se děje okamžitě a automaticky, což zajišťuje, že model a pohled jsou neustále aktualizovány.
Příklad
<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>
Ovladač AngularJS
Aplikace v AngularJS jsou řízeny ovladači. Přečtěte si o ovladačích v kapitole AngularJS Controllers .
Díky okamžité synchronizaci modelu a pohledu lze ovladač zcela oddělit od pohledu a jednoduše se soustředit na data modelu. Díky datové vazbě v AngularJS bude pohled odrážet veškeré změny provedené v ovladači.
Příklad
<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>