Aprendiendo AngularJS (IX). Eventos (I)
AngularJS tiene sus propias directivas para controlar los eventos que puedan ocurrir en un interfaz HTML. Como ejemplo echa un vistazo al siguiente código que te presentamos:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myfpschoolApp" ng-controller="myfpschoolCtrl">
<h3 ng-click="contador = contador + 1">Haz clic aquí para aumentar la cantidad</h3>
<h1>{{ contador }}</h1>
<h3 ng-click="contador = contador - 1">Haz clic aquí para disminuir la cantidad</h3>
<script>
var app = angular.module('myfpschoolApp', []);
app.controller('myfpschoolCtrl', function($scope) {
$scope.contador = 0;
});
</script>
</body>
</html>
Como puedes observar, hemos creado una aplicación y un controlador asociado el cual almacena una variable en el objeto $scope llamada contador. Esta variable aumentará o disminuirá dependiendo de si haces clic sobre un texto u otro.
Modifica algo el ejemplo anterior y ejecútalo. Prueba que funciona.
Lo único que hacemos es aumentar o disminuir un contador. Algo sencillo. No obstante, las aplicaciones que nosotros vamos a diseñar en un futuro tendrán que ser algo más complejas que eso y por lo tanto necesitaremos asociar más código a cada evento. Para ello, la mejor solución sería asociar una función la cual puede contener suficiente código como para cumplir los requerimientos que se necesiten.
Veamos cómo podemos modificar el código anterior para hacer una llamada a una función:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myfpschoolApp" ng-controller="myfpschoolCtrl">
<h3 ng-click="aumentar()">Haz clic aquí para aumentar la cantidad</h3>
<h1>{{ contador }}</h1>
<h3 ng-click="disminuir()">Haz clic aquí para disminuir la cantidad</h3>
<script>
var app = angular.module('myfpschoolApp', []);
app.controller('myfpschoolCtrl', function($scope) {
$scope.contador = 0;
$scope.aumentar = function() {
$scope.contador++;
}
$scope.disminuir = function() {
$scope.contador--;
}
});
</script>
</body>
</html>
La solución ha sido sencilla. Modificar el código y sustituirlo por llamadas a funciones que estarán declaradas en modelo (objeto $scope). Como puedes ver, en una aplicación AngularJS podemos tener el número de Listener que queramos.
Modifica algo el ejemplo anterior para que en vez de utilizar dos funciones se utilice solamente una a la que le pasamos un parámetro el cual hace que se aumente o disminuya el contador.
AngularJS ofrece directivas para prácticamente cualquier evento que pueda suceder en tu interfaz. Enumeramos algunas de ellas:
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-blur
- ng-change
- ng-click
- ng-copy
- ng-cut
- ng-dblclick
- ng-focus
- ng-keydown
- ng-keypress
- ng-keyup
- ng-paste
Recibimos en JSON una serie de datos con 10 registros con el formato:
- Texto.
- v/f. Verdadero o falso dependiendo si el texto anterior es verdadero o falso.
Se pide crear una web en la que el usuario tendrá que valorar si los textos son verdaderos o falsos. Nuestra web cambiará de color el texto a verde o rojo dependiendo si el usuario acierta o se equivoca.
Utiliza las directivas anteriormente vistas para realizar tu pequeña aplicación.