Enlace de datos de AngularJS
El enlace de datos en AngularJS es la sincronización entre el modelo y la vista.
Modelo de datos
Las aplicaciones de AngularJS suelen tener 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
= "John";
$scope.lastname = "Doe";
});
Vista HTML
El contenedor HTML donde se muestra la aplicación AngularJS se denomina vista.
La vista tiene acceso al modelo y hay varias formas de mostrar los datos del modelo en la vista.
Puede usar la ng-binddirectiva, que vinculará el HTML interno del elemento a la propiedad del modelo especificado:
Ejemplo
<p ng-bind="firstname"></p>
También puede usar llaves dobles para mostrar el contenido del modelo:{{ }}
Ejemplo
<p>First name: {{firstname}}</p>
O puede usar la ng-modeldirectiva sobre controles HTML para vincular el modelo a la vista.
La ng-modelDirectiva
Use la ng-modeldirectiva para vincular datos del modelo a la vista en controles HTML (entrada, selección, área de texto)
Ejemplo
<input ng-model="firstname">
La ng-modeldirectiva proporciona un enlace bidireccional entre el modelo y la vista.
Encuadernación bidireccional
El enlace de datos en AngularJS es la sincronización entre el modelo y la vista.
Cuando cambian los datos del modelo , la vista refleja el cambio y, cuando cambian los datos de la vista , el modelo también se actualiza. Esto sucede de forma inmediata y automática, lo que garantiza que el modelo y la vista estén actualizados en todo momento.
Ejemplo
<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>
Controlador AngularJS
Las aplicaciones en AngularJS están controladas por controladores. Lea sobre los controladores en el capítulo Controladores de AngularJS .
Debido a la sincronización inmediata del modelo y la vista, el controlador puede estar completamente separado de la vista y simplemente concentrarse en los datos del modelo. Gracias al enlace de datos en 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
= "John";
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>