Dane wiąże w angularjs jest synchronizacja pomiędzy modelem a widokiem.
Model danych
Angularjs aplikacje mają zwykle modelu danych. Model danych jest zbiorem danych dostępnych dla danej aplikacji.
Przykład
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
HTML Zobacz
Pojemnik HTML, gdzie wyświetlana jest aplikacja angularjs, nazywa się widokiem.
Widok ma dostęp do modelu, i istnieje kilka sposobów wyświetlania danych w widoku modelu.
Można użyć ng-bind dyrektywę, która będzie wiązać innerHTML elementu do określonej właściwości modelu:
Można również użyć podwójnych nawiasów {{ }} {{ }} {{ }} , Aby wyświetlić treści z wzorem:
Albo można użyć ng-model dyrektywa w sprawie HTML kontroluje powiązać model do widoku.
ng-model dyrektywa
Użyj ng-model dyrektywy wiążą dane z modelu do widoku sprawie kontroli HTML (input, select, textarea)
ng-model dyrektywy stanowi wiążącą pomiędzy modelem a widokiem dwukierunkową.
Dwukierunkowa Binding
Dane wiąże w angularjs jest synchronizacja pomiędzy modelem a widokiem.
Gdy dane w modelu zmian, widok odzwierciedla zmianę, a gdy dane w widoku zmian, model jest aktualizowany w miarę dobrze. Dzieje się natychmiast i automatycznie, co zapewnia, że model i widok jest aktualizowana w każdej chwili.
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>
Spróbuj sam " angularjs Controller
Aplikacje w angularjs są kontrolowane przez kontrolerów. Przeczytaj o kontrolerach w angularjs Kontrolery rozdziału.
Z uwagi na natychmiastowe synchronizacji modelu i widoku, kontroler może być całkowicie oddzielone od widoku, a jedynie koncentrować się na podstawie danych wzorcowych. Dzięki obowiązujących w angularjs danych, widok będzie odzwierciedlać zmiany wprowadzone w sterowniku.
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.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>
Spróbuj sam "