Cómo verificar si alguna checkbox está marcada en Angular

¿Hay alguna función o ng- algo para verificar si alguna de las casillas de verificación que se muestran están marcadas?

Tengo los valores a través de la función ng-click = “()” y paso los valores. Puedo ir a pie y verificar mi matriz si hay algún valor dentro.

Quiero activar / desactivar el botón “siguiente” si hay alguna checkbox marcada.

¿Cuál es la forma más fácil?

Puedes hacer algo como:

function ChckbxsCtrl($scope, $filter) { $scope.chkbxs = [{ label: "Led Zeppelin", val: false }, { label: "Electric Light Orchestra", val: false }, { label: "Mark Almond", val: false }]; $scope.$watch("chkbxs", function(n, o) { var trues = $filter("filter")(n, { val: true }); $scope.flag = trues.length; }, true); } 

Y una plantilla:

 
I'm ON when band choosed

Trabajando: http://jsfiddle.net/cherniv/JBwmA/

ACTUALIZACIÓN: O puede ir un poco diferente, sin usar el método $watch() $scope , como:

 $scope.bandChoosed = function() { var trues = $filter("filter")($scope.chkbxs, { val: true }); return trues.length; } 

Y en una plantilla hacer:

 
I'm ON when band choosed

Fiddle: http://jsfiddle.net/uzs4sgnp/

Si no quieres usar un observador, puedes hacer algo como esto:

  

Si solo tiene una checkbox, puede hacerlo fácilmente con solo ng-model:

   

Y inicialice $ scope.checked en su Controlador (predeterminado = falso). El documento oficial desalienta el uso de ng-init en ese caso.

Intente pensar en términos de un modelo y qué le sucede a ese modelo cuando se marca una checkbox.

Suponiendo que cada checkbox está vinculada a un campo en el modelo con ng-model, la propiedad en el modelo se cambia cada vez que se hace clic en una checkbox:

   

y en el controlador:

 $scope.fooSelected = false; $scope.baaSelected = false; 

El siguiente botón solo debería estar disponible en determinadas circunstancias, así que agregue la directiva ng-disabled al botón:

  

Ahora el siguiente botón solo debería estar disponible cuando fooSelected sea verdadero o baaSelected sea verdadero y tengamos que ver cualquier cambio en estos campos para asegurarnos de que el siguiente botón esté disponible o no:

 $scope.$watch('[fooSelected,baaSelected]', function(){ $scope.nextButtonDisabled = !$scope.fooSelected && !scope.baaSelected; }, true ); 

Lo anterior supone que hay solo unas pocas casillas de verificación que afectan la disponibilidad del siguiente botón, pero podría cambiarse fácilmente para que funcione con un mayor número de casillas de verificación y usar $ watchCollection para verificar los cambios.

Esto es re-post para insertar el código también. Este ejemplo incluía: – Una lista de objetos – Cada objeto tiene lista infantil. Ex:

 var list1 = { name: "Role A", name_selected: false, subs: [{ sub: "Read", id: 1, selected: false }, { sub: "Write", id: 2, selected: false }, { sub: "Update", id: 3, selected: false }], }; 

Voy a enumerar 3 como arriba y voy a agregar a una lista de objetos

 newArr.push(list1); newArr.push(list2); newArr.push(list3); 

Luego haré cómo mostrar la checkbox con múltiples grupos:

 $scope.toggleAll = function(item) { var toogleStatus = !item.name_selected; console.log(toogleStatus); angular.forEach(item, function() { angular.forEach(item.subs, function(sub) { sub.selected = toogleStatus; }); }); }; $scope.optionToggled = function(item, subs) { item.name_selected = subs.every(function(itm) { return itm.selected; }) $scope.txtRet = item.name_selected; } 

HTML:

 
    • {{item.name}}
    • {{sub.sub}}
    {{txtRet}}
  • Fiddle: ejemplo

    Tengo una muestra para datos múltiples con su lista del subnodo 3, cada lista tiene atributo y atributo hijo:

     var list1 = { name: "Role A", name_selected: false, subs: [{ sub: "Read", id: 1, selected: false }, { sub: "Write", id: 2, selected: false }, { sub: "Update", id: 3, selected: false }], }; var list2 = { name: "Role B", name_selected: false, subs: [{ sub: "Read", id: 1, selected: false }, { sub: "Write", id: 2, selected: false }], }; var list3 = { name: "Role B", name_selected: false, subs: [{ sub: "Read", id: 1, selected: false }, { sub: "Update", id: 3, selected: false }], }; 

    Añádalos a Array:

     newArr.push(list1); newArr.push(list2); newArr.push(list3); $scope.itemDisplayed = newArr; 

    Muéstrales en html:

     
    • {{item.name}}
    • {{sub.sub}}
  • Y aquí está la solución para verificarlos:

     $scope.toggleAll = function(item) { var toogleStatus = !item.name_selected; console.log(toogleStatus); angular.forEach(item, function() { angular.forEach(item.subs, function(sub) { sub.selected = toogleStatus; }); }); }; $scope.optionToggled = function(item, subs) { item.name_selected = subs.every(function(itm) { return itm.selected; }) } 

    jsfiddle demo