Como verificar se alguma checkbox de seleção está marcada no Angular

Existe alguma function ou algo para verificar se alguma das checkboxs de seleção exibidas está marcada?

Eu tenho os valores através do ng-click = “function ()” e passo os valores. Eu posso ir a pé e verificar minha matriz se algum valor está dentro.

Desejo ativar / desativar a tecla “next” se alguma checkbox de seleção estiver marcada.

Qual é o caminho mais fácil?

Você pode fazer 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); } 

E um modelo:

 
I'm ON when band choosed

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

ATUALIZAÇÃO: Ou você pode seguir um pouco diferente, sem usar o método $watch() , como:

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

E em um modelo, faça:

 
I'm ON when band choosed

Violino: http://jsfiddle.net/uzs4sgnp/

Se você não quiser usar um observador, você pode fazer algo assim:

  

Se você tiver apenas uma checkbox de seleção, você pode fazer isso facilmente com apenas ng-model:

   

E inicialize $ scope.checked no seu Controller (default = false). O documento oficial desencoraja o uso do ng-init nesse caso.

Tente pensar em termos de um modelo e o que acontece com esse modelo quando uma checkbox de seleção é marcada.

Supondo que cada checkbox de seleção esteja vinculada a um campo no modelo com ng-model, a propriedade no modelo será alterada sempre que uma checkbox de seleção for clicada:

   

e no controlador:

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

O próximo botão só deve estar disponível sob certas circunstâncias, então adicione a diretiva ng-disabled ao botão:

  

Agora, o próximo botão só deve estar disponível quando fooSelected for true ou baaSelected for true e precisarmos observar as alterações nesses campos para garantir que o próximo botão seja disponibilizado ou não:

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

O texto acima assume que existem apenas algumas checkboxs de seleção que afetam a disponibilidade do próximo botão, mas que podem ser facilmente alteradas para trabalhar com um número maior de checkboxs de seleção e usar $ watchCollection para verificar as alterações.

Isso é re-post para o código de inserção também. Este exemplo incluiu: – Uma lista de objects – Cada object possui uma lista de filhos. 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 }], }; 

Eu vou listar como acima e eu vou adicionar a uma lista de um object

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

Então eu vou fazer como mostrar checkbox com vários 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}}
  • Violino: exemplo

    Eu tenho uma amostra para vários dados com sua lista de subnós 3, cada lista tem atributo e atributo filho:

     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 }], }; 

    Adicione estes ao array:

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

    Mostre-os em html:

     
    • {{item.name}}
    • {{sub.sub}}
  • E aqui está a solução para verificá-los:

     $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; }) } 

    demo jsfiddle