En este artículo, veremos el enlace de datos, junto con la comprensión de cómo el flujo de código es de un archivo Typescript a un archivo HTML y viceversa a través de su implementación.
En AngularJS, Data Binding se refiere a la sincronización entre el modelo y la vista. En el enlace de datos bidireccional, el flujo de datos es bidireccional, es decir, cuando los datos en el modelo cambian, los cambios se reflejan en la vista y cuando los datos en la vista cambian, se reflejan en el modelo. El enlace de datos bidireccional se logra mediante el uso de la directiva ng-model . La directiva ng-model transfiere datos de la vista al modelo y del modelo a la vista.
Enfoque: Se implementará el siguiente enfoque para lograr el enlace bidireccional:
- Crear un módulo
var app=angular.module('myApp',[])
- Agregue un controlador al módulo. Aquí puede escribir la lógica para actualizar el modelo a medida que cambia la vista.
app.controller('myCtrl',function($scope){})
- Especifique la directiva ng-model en el elemento
<input ng-model="name"/>
Ejemplo 1: este ejemplo muestra cómo se puede usar la directiva ng-model para el enlace de datos bidireccional.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Two-way Data Binding in AngularJS
</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js">
</script>
</head>
<body ng-app="">
<h1>GeeksforGeeks</h1>
<h3>Two-way Data Binding</h3>
<form>
<label>Enter your name </label>
<input type="text"
ng-model="name">
</form>
<p>{{name}}</p>
</body>
</html>
Explicación: En el ejemplo anterior, hemos utilizado la directiva ng-model en el elemento de entrada. Cuando el usuario ingresa datos en el elemento de entrada, se refleja en la etiqueta <p> donde hemos usado una expresión para mostrar el valor de ‘nombre’. Este es un ejemplo de enlace de datos bidireccional, ya que cuando cambiamos el valor de control de entrada, el valor de la variable ‘nombre’ también cambia.
Producción:
Ejemplo 2: En este ejemplo, hemos creado un formulario de registro. El usuario completa los datos y hace clic en el botón enviar. Al hacer clic en el botón Enviar, se muestran los datos rellenados por el usuario.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Two-way Data Binding in AngularJS
</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<h1>GeeksforGeeks</h1>
<h3>Two-way Binding</h3>
<h4>Registration form</h4>
<form name="registrationForm"
ng-controller="myCtrl">
<label>Enter your name</label>
<input type="text"
ng-model="name" />
<br />
<label>Enter your age</label>
<input type="text"
ng-model="age" />
<br />
<p>Courses:</p>
<input type="checkbox"
ng-model="value1"
name="option1"
value="C++" />
<label>C++</label>
<br />
<input type="checkbox"
ng-model="value2"
name="option2"
value="Java" />
<label>Java</label>
<br />
<input type="checkbox"
ng-model="value3"
name="option3"
value="Python" />
<label>Python</label>
<br />
<input type="submit"
ng-click="details()" />
<div>
<br />
<table border="1px solid black"
style="border-collapse: collapse">
<tr border="1px solid black"
style="border-collapse: collapse"
ng-repeat="x in registrationDetails">
<td>{{x.key}}</td>
<td>{{x.value}}</td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.details = function() {
$scope.courses = [];
if($scope.value1)
$scope.courses.push(registrationForm.option1.value);
if($scope.value2)
$scope.courses.push(registrationForm.option2.value);
if($scope.value3)
$scope.courses.push(registrationForm.option3.value);
$scope.registrationDetails = [{
key: 'Name',
value: $scope.name
}, {
key: 'Age',
value: $scope.age
}, {
key: 'Courses interested in',
value: $scope.courses.toString()
}, ];
};
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por divyasharma5d12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA