Привязка данных AngularJS
Привязка данных в AngularJS — это синхронизация между моделью и представлением.
Модель данных
Приложения AngularJS обычно имеют модель данных. Модель данных представляет собой набор данных, доступных для приложения.
Пример
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
HTML-просмотр
Контейнер HTML, в котором отображается приложение AngularJS, называется представлением.
Представление имеет доступ к модели, и существует несколько способов отображения данных модели в представлении.
Вы можете использовать ng-bindдирективу, которая привяжет innerHTML элемента к указанному свойству модели:
Пример
<p ng-bind="firstname"></p>
Вы также можете использовать двойные фигурные скобки для отображения содержимого модели:{{ }}
Пример
<p>First name: {{firstname}}</p>
Или вы можете использовать ng-modelдирективу для элементов управления HTML, чтобы связать модель с представлением.
ng-modelДиректива _
Используйте ng-modelдирективу для привязки данных из модели к представлению элементов управления HTML (ввод, выбор, текстовое поле)
Пример
<input ng-model="firstname">
Директива ng-modelобеспечивает двустороннюю привязку между моделью и представлением.
Двусторонняя привязка
Привязка данных в AngularJS — это синхронизация между моделью и представлением.
Когда данные в модели изменяются, представление отражает изменение, а когда изменяются данные в представлении , модель также обновляется. Это происходит немедленно и автоматически, что гарантирует постоянное обновление модели и представления.
Пример
<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>
Контроллер AngularJS
Приложения в AngularJS управляются контроллерами. Читайте о контроллерах в главе Контроллеры AngularJS .
Благодаря непосредственной синхронизации модели и представления контроллер можно полностью отделить от представления и просто сосредоточиться на данных модели. Благодаря привязке данных в AngularJS представление будет отражать любые изменения, сделанные в контроллере.
Пример
<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>