Привязка данных AngularJS

Связи данных в AngularJS являются синхронизацией между моделью и представлением.

Данные модели

AngularJS приложение обычно имеет данные модели. Данные модели представляют собой набор данных, доступных для приложения.

Пример

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});

HTML-вид

HTML-контейнер, используемый для AngularJS приложения, называется видом.

Представление может обращаться к модели, и есть несколько способов отображения данных модели в представлении.

Вы можете использовать ng-bind инструкцию, которая будет связывать innerHTML элемента с указанным свойством модели:

Пример

<p ng-bind="firstname"></p>

Попробуйте сами

Вы также можете использовать двойные фигурные скобки {{ }} чтобы отображать содержимое модели:

Пример

<p>First name: {{firstname}}</p>

Попробуйте сами

или вы можете использовать на HTML-контроллере ng-model Инструкции связывают модель с представлением.

инструкции ng-model

Использование ng-model Инструкции связывают данные модели с представлением HTML-контроллера (input, select, textarea).

Пример

<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 = "Bill";
  $scope.lastname = "Gates";
});
</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 = "Bill";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

Попробуйте сами