tutoriais mais recente desenvolvimento web
 

AngularJS Ligação de dados


Dados obrigatório em AngularJS é a sincronização entre o modelo e a vista.


Modelo de dados

AngularJS aplicações geralmente têm um modelo de dados. O modelo de dados é uma coleção de dados disponíveis para a aplicação.

Exemplo

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

HTML Ver

O recipiente HTML onde a aplicação AngularJS é exibido, é chamado a vista.

A visão tem acesso ao modelo, e há várias maneiras de exibir dados do modelo na vista.

Você pode usar o ng-bind directiva, que irá ligar o innerHTML do elemento para a propriedade modelo especificado:

Exemplo

<p ng-bind="firstname"></p>
Tente você mesmo "

Você também pode usar chaves duplas {{ }} {{ }} {{ }} Para exibir o conteúdo do modelo:

Exemplo

<p>First name: {{firstname}}</p>
Tente você mesmo "

Ou você pode usar o ng-model directiva sobre HTML controla o efeito de vincular o modelo para a vista.


O ng-model directiva

Use o ng-model directiva para ligar dados a partir do modelo para a vista sobre controles HTML (input, select, textarea)

Exemplo

<input ng-model="firstname">
Tente você mesmo "

O ng-model directiva prevê uma ligação entre o modelo ea vista de duas vias.


Two-way Binding

Dados obrigatório em AngularJS é a sincronização entre o modelo e a vista.

Quando os dados nas mudanças do modelo, a vista reflete a mudança, e quando os dados na vista alterações, o modelo também será atualizada. Isso acontece imediatamente e automaticamente, o que garante que o modelo ea vista é atualizado em todos os momentos.

Exemplo

<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>
Tente você mesmo "

AngularJS Controlador

Aplicações em AngularJS são controlados por controladores. Leia sobre controladores no AngularJS Controladores capítulo.

Devido à sincronização imediata do modelo ea vista, o controlador pode ser completamente separado do ponto de vista, e simplesmente concentrar-se nos dados do modelo. Graças a ligação de dados em AngularJS, a vista vai refletir quaisquer alterações feitas no controlador.

Exemplo

<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>
Tente você mesmo "