Последние учебники веб-разработки
 

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 директива обеспечивает двустороннюю связывания между моделью и представлением.

Двусторонний Binding

Связывание данных в 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.changeName = function() {
        $scope.firstname = "Nelly";
    }
});
</script>
Попробуй сам "

❮ Предыдущая Следующая Глава ❯