Vinculação de dados AngularJS

O vínculo de dados no AngularJS é a sincronização entre modelo e visão.

Modelo de dados

O aplicativo AngularJS geralmente tem um modelo de dados. O modelo de dados é a coleção de dados disponíveis para o aplicativo.

Exemplo

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

Visão HTML

O contêiner HTML do aplicativo AngularJS chamado visão.

A visão pode acessar o modelo e há várias maneiras de exibir dados do modelo na visão.

Você pode usar ng-bind instrução, que liga o innerHTML do elemento ao atributo do modelo especificado:

Exemplo

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

Experimente pessoalmente

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

Exemplo

<p>Primeiro nome: {{firstname}}</p>

Experimente pessoalmente

Ou, você pode usar ng-model A instrução liga o modelo ao visão.

instrução ng-model

Usando ng-model As instruções ligam os dados do modelo ao visão dos controles HTML (input, select, textarea).

Exemplo

<input ng-model="firstname">

Experimente pessoalmente

ng-model As instruções fornecem um vínculo bidirecional entre modelo e visão.

Vínculo bidirecional

O vínculo de dados no AngularJS é a sincronização entre modelo e visão.

Quando os dados do modelo mudam, a visão reflete essa mudança, e quando os dados da visão mudam, o modelo também é atualizado. Isso acontece imediatamente e automaticamente, garantindo que o modelo e a visão estejam sempre atualizados.

Exemplo

<div ng-app="myApp" ng-controller="myCtrl">
  Nome: <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>

Experimente pessoalmente

Controladores AngularJS

O aplicativo AngularJS é controlado pelo controlador. Leia mais sobre controladores no capítulo sobre controladores do AngularJS.

Devido ao sincronismo imediato entre modelo e visão, o controlador pode ser completamente separado, concentrando-se apenas nos dados do modelo. Devido ao vínculo de dados do AngularJS, a visão refletirá qualquer alteração feita 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.firstname = "Bill";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

Experimente pessoalmente