Vinculación de datos de AngularJS

La asociación de datos en AngularJS es la sincronización entre el modelo y la vista.

Modelo de datos

La aplicación de AngularJS generalmente tiene un modelo de datos. El modelo de datos es una colección de datos disponibles para la aplicación.

Ejemplo

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

Vista HTML

El contenedor HTML de la aplicación de AngularJS se llama vista.

La vista puede acceder al modelo y hay varias formas de mostrar los datos del modelo en la vista.

Puede usar ng-bind instrucción, que vincula el innerHTML del elemento a la propiedad de modelo especificada:

Ejemplo

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

Prueba por tu cuenta

También puede usar {{ }} para mostrar el contenido del modelo:

Ejemplo

<p>Nombre: {{firstname}}</p>

Prueba por tu cuenta

O, también puede usar ng-model La instrucción vincula el modelo a la vista.

instrucción ng-model

Usar ng-model La instrucción vincula los datos del modelo a la vista de los控件 de HTML (input, select, textarea).

Ejemplo

<input ng-model="firstname">

Prueba por tu cuenta

ng-model Las instrucciones proporcionan una vinculación bidireccional entre el modelo y la vista.

Vinculación bidireccional

La asociación de datos en AngularJS es la sincronización entre el modelo y la vista.

Cuando los datos del modelo cambian, la vista refleja ese cambio, y cuando los datos de la vista cambian, el modelo también se actualiza. Esto ocurre de manera inmediata y automática, asegurando que el modelo y la vista se actualicen siempre.

Ejemplo

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

Prueba por tu cuenta

Controladores de AngularJS

La aplicación de AngularJS es controlada por el controlador. Por favor, consulte el capítulo sobre controladores en AngularJS para obtener información sobre los controladores.

Debido a la sincronización inmediata entre el modelo y la vista, el controlador puede separarse completamente de la vista y centrarse solo en los datos del modelo. Gracias a la asociación de datos de AngularJS, la vista reflejará cualquier cambio realizado en el controlador.

Ejemplo

<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>

Prueba por tu cuenta