Explicaciones y prácticas con campos input checkbox con AngularJS, conociendo las directivas ngChecked, ngTrueValue, ngFalseValue, ngChecked.
En el estilo de aplicaciones que se hacen con AngularJS trabajas de manera intensiva con campos de formulario. Puedes leer este artículo para aprender todo sobre los checkbox y hacer algún ejemplo práctico.
En Angular los campos input checkbox tienen una serie de directivas que podemos usar:
- ngModel: indica el nombre con el que se conocerá a este elemento en el modelo/scope.
- ngTrueValue: La utilizas si deseas asignar un valor personalizado al elemento cuando el campo checkbox está marcado.
- ngFalseValue: es lo mismo que ngTrueValue, pero en este caso con el valor asignado cuando el campo no está "checado".
- ngChange: sirve para indicar expresiones a realizar cuando se produce un evento de cambio en el elemento. Se dispara cuando cambia el estado del campo, marcado a no marcado y viceversa. Podemos ejecutar nuestra expresión o llamar a una función en nuestro scope.
Viene a explicar que sirve para conservar un valor en el atributo checked. Ese atributo en HTML funciona como un boleano, si se encuentra el atributo se entiende que está chequeado y si no se encuentra checked es que no debe estar marcado. Por ello los navegadores no están obligados a memorizar ningún valor en el checked. En esos casos puedes usar ngChecked. En definitiva, en la práctica ese campo sirve para indicar una variable del scope donde se pueda deducir si el elemento debe estar o no marcado (checked).
Directiva ngModel
Si quieres usar un checkbox lo más normal es que indiques la referencia de tu modelo donde quieres que se guarde su estado.
<input type="checkbox" ng-model="vm.activo" />A partir de este momento el checkbox está asociado a tu scope en vm.activo. Pero un detalle, en el scope todavía no está creada esa propiedad hasta que no pulses encima del checkbox para activarlo o desactivarlo. En ese momento pasa a existir vm.activo en el modelo, aunque también si lo deseamos podemos inicializarla en un controlador.
vm.activo = true;Como sabes, durante la vida de tu aplicación, el estado del checkbox se traslada automáticamente desde la vista al modelo y desde el modelo a la vista, por el proceso conocido por "doble binding". En resumen, si en cualquier momento desde el Javascript cambias el valor de vm.activo, siempre se actualizará la vista. Por supuesto, si en la vista pulsas sobre el campo para activarlo o desactivarlo, en el modelo también quedará reflejado el nuevo estado.
Directivas ngTrueValue y ngFalseValue
En tu modelo, la propiedad vm.activo podrá tener dos valores, true o false, que corresponden a los estos de estar marcado el checkbox o no marcado. Sin embargo, puede resultar útil tener otros valores en caso de estar activos o no, en vez del boleano. Para ello usas estas directivas.
<input type="checkbox" ng-model="vm.clarooscuro" ng-true-value="claro" ng-false-value="oscuro" />
Directiva ngChange
Esta directiva sirve para especificar acciones cuando cambia el estado del checkbox. Pero atención, porque son solo cambios debidos a la interacción con el usuario. Es decir, si mediante Javascript cambiamos el modelo asociado a ese checkbox, cambiándolo de un estado a otro no se activará el evento ng-change. La vista seguirá alterando el estado del campo, gracias al mencionado binding, pero la expresión que hayas colocado en ng-change no se ejecutará.
<input type="checkbox" ng-change="vm.avisar()">
Ejemplo de uso de estas directivas en checkbox
Ahora puedes ver un código HTML que trabaja con campos checkbox y que pone en marcha los puntos vistos en este artículo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Trabajando con checkboxes AngularJS</title>
</head>
<body ng-app="app" ng-controller="appCtrl as vm">
<p>
<input type="checkbox" ng-model="vm.activo" ng-change="vm.avisar()">
Este campo es vm.activo y su valor en el modelo es {{ vm.activo }}.
<br />
Tiene además un ng-change asociado con el método vm.avisar().
</p>
<p>
<input type="checkbox" ng-model="vm.clarooscuro" ng-true-value="claro" ng-false-value="oscuro" />
Este campo tiene el value modificado. Ahora vale {{ vm.clarooscuro }}
</p>
<p>
<input type="button" ng-click="vm.activo=true" value="pulsa para cambiar la propiedad del modelo del primer checkbox a true"> Observarás que aunque el estado pueda cambiar, no se invoca al ng-change de ese primer checkbox.
</p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script>
var app = angular.module("app", [])
app.controller("appCtrl", function(){
var vm = this;
//podríamos inicializar valores del modelo
//vm.activo = false;
vm.avisar = function(){
console.log("cambié");
}
});
</script>
</body>
</html>Observa que al iniciarse por primera vez la página los valores del modelo (definidos en los checkboxes con ng-model) no están inicializados. Por ello las expresiones donde se vuelcan estos datos no muestran valor alguno. Luego, cuando cambias el estado de los checkboxes ya se empieza a ver el estado de los elementos. Esta situación podría cambiar solo con inicializar esas propiedades en el controlador. Lo hemos colocado en el código comentado para que se vea bien.
El otro detalle que igual no salta a la vista es la llamada a la función del modelo vm.avisar(), colocada en el ng-change del primer checkbox, que no se llama cuando se cambia el estado del campo como consecuencia del Javascript. Demostrar eso es el motivo de la existencia del botón.
Hay infinidad de prácticas con checkboxes. Con lo que has visto aquí seguramente sepas desempeñar cualquier situación.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...