Vamos a empezar a trabajar con los eventos, y con más directivas (no os preocupeis la última entrada de esta serie de tutoriales será una recopilación de todas las directivas y su función).
Y que mejor forma de ver como funciona que con un ejemplo:
Como puedes ver en este ejemplo existe la directiva ng-hide la cual aparece en el controlador definida como false, es decir que el elemento completo se mostrará, pero si pulsamos en el botón la función toggle() nos va cambiando el valor de la variable myVar haciendo que todo lo que esta en su entorno se muestre o desaparezca.
ng-click
En este caso vamos a trabajar con la directiva ng-click, que sirve para cuando hacemos click en un elemento del DOM.Y que mejor forma de ver como funciona que con un ejemplo:
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="myController">
<button ng-click="contador = contador + 1">Suma 1 al contador</button>
<button ng-click="contador = contador - 1">Resta 1 al contador</button>
<p>{{ contador }}</p>
</div>
<script>
function myController($scope) {
$scope.contador = 0;
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
- Como puedes observar tenemos las ya rutinarias ng-app (que inicializa la aplicación) y ng-controller (que llama a nuestro controlador de la misma).
- A continuación en ng-click se actualiza la propiedad contador del $scope añadiéndole o restándole 1, según el botón que pulsemos. Hay que tener en cuenta que en el controlador el contador empieza con un valor de cero.
- Finalmente en un párrafo se introduce la expresión que muestra el valor actual del contador.
Ocultando elementos del HTML
ng-hide
Una operación bastante típica en las webs dinámicas es el ocultar y mostrar partes del DOM, esto se ha hecho siempre desde javascript o desde JQuery, pero Angular no es menos en este caso, y puede hacerlo de forma sencilla.
Para ello utiliza dos directivas, ng-hide y ng-show que se explica más abajo.
ng-hide es una directiva tipo booleano que puede tomar dos valores:
- true: el elemento del DOM esta oculto
- false: el elemento se encuentra visible
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="personController">
<button ng-click="toggle()">Ocultar/mostrar usuario</button>
<p ng-hide="myVar">
Nombre: <input type=text ng-model="persona.nombre"><br>
Apellido: <input type=text ng-model="persona.apellido"><br><br>
Nombre completo: {{persona.nombre + " " + persona.apellido}}
</p>
</div>
<script>
function personController($scope) {
$scope.persona = {
nombre: "Paco",
apellido: "Perez"
};
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Como puedes ver en este ejemplo existe la directiva ng-hide la cual aparece en el controlador definida como false, es decir que el elemento completo se mostrará, pero si pulsamos en el botón la función toggle() nos va cambiando el valor de la variable myVar haciendo que todo lo que esta en su entorno se muestre o desaparezca.
ng-show
Del mismo modo pero a la inversa funciona esta directiva de modo que sus valores responden a:
- true: el elemento es visible
- false: el elemento se oculta
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="personController">
<button ng-click="toggle()">Ocultar/mostrar usuario</button>
<p ng-show="myVar">
Nombre: <input type=text ng-model="persona.nombre"><br>
Apellido: <input type=text ng-model="persona.apellido"><br><br>
Nombre completo: {{persona.nombre + " " + persona.apellido}}
</p>
</div>
<script>
function personController($scope) {
$scope.persona = {
nombre: "Paco",
apellido: "Perez"
};
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
Tendras algun ejemplo de como ocultar determinada fila (una si otras no) de una tabla generada usando un ng-repeat?
ResponderEliminar