Trabajando con campos checkbox en AngularJS

  • Por
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.

Nota: Además, tenemos ngChecked, aunque esta directiva no está en la documentación del campo checkbox, sino en otra página. https://docs.angularjs.org/api/ng/directive/ngChecked
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

LeoCer

11/6/2015
Directivas ngTrueValue y ngFalseValue
Hola!!
Puede ser

Daniel Del Cid

16/7/2015
Gracias
Gracias por tomarte el tiempo de hacer estos tutoriales, me han enseñado mucho!

JESSE

17/7/2015
Correcion del subtitulo
EL subtitulo debe cambiar el primer ngChecked por ngModel, solo eso para evitar confusiones, por lo demas excelente tutorial

Fede

04/8/2015
Valor ng-change
Cuando quiero leer el valor del checkbox dentro de la función de ng-change me devuelve siempre el valor inicial y no el actual, ¿por qué?
Gracias!

omar__chvez

02/9/2015
ng-true-value y ng-false-value me presentaron error. Corrección...
Probando el ejemplo, no me funcionaba el ejemplo del checkbox con el modelo clarooscuro. El detalle es que en el ejemplo se asignan los valores claro y oscuro, pero verificando la documentación (https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D) veo que para que no se lance una excepción, se deben poner los valores entre apostrofes (asignando un valor string), quedando la linea de la siguiente manera:

<input type="checkbox" ng-model="modelo.clarooscuro" ng-true-value="'claro'" ng-false-value="'oscuro'" />

Es un excelente manual... esta pequeña acotación espero apoye a quienes tengan problemas y no encuentren la solución.

Saludos!

edu93kamu

18/4/2016
Gracias por ver el fallo
Buen aporte omar__chvez yo he estado como media hora mirando el posible fallo y no daba con el error, pero gracias a ti lo he descubierto

María

13/11/2016
checkbox
Hola Miguel, quisiera saber si hay alguna forma de que yo pueda activar algunos checkbox y que estos permazecan así aun luego de cerrar la página, o sea que cuando la vuelva a abrir pueda ser seleccioando checkbos y que no se hayan desactivado los que había activado anteriormente.
Muchísimas Gracias por tus artículos, muy interesantes siempre!!!