4

Eu estou tentando usar um Array num input[type=checkbox] com Angular 1, porém não obtive sucesso.

angular.module('app', [])


.controller("Ctrl", function ($scope){

  $scope.campos = [{nome: "Brasil"}, {nome: "Argentina"}, {nome: "Paraguai"}];
  
  $scope.campos_selecionados = [];

})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>


<div ng-app="app" ng-controller="Ctrl">
  <label ng-repeat="campo in campos">
    <input type="checkbox" 
          ng-true-value="{{ campo }}"
          ng-false-value="undefined"
          ng-model="campos_selecionados[$index]">
    {{ campo.nome }}
  </label>
  
  
  <pre>{{ campos_selecionados | json }}</pre>
</div>

No exemplo acima, o Array, mesmo quando o checkbox não está selecionado, fica marcado como null.

Como eu posso fazer para o meu checkbox gerar um Array com os itens que foram selecionados?

2 Respostas 2

4

A minha solução para isso foi não utilizar o ng-model. Ao invés disso, eu defini uma função executada quando há o click no checkbox e verifico se o item está selecionado através do indexOf na diretiva ng-checked.

Veja:

angular.module('app', [])


.controller("Ctrl", function ($scope){

  $scope.campos = [{nome: "Brasil"}, {nome: "Argentina"}, {nome: "Paraguai"}];
  
  $scope.campos_selecionados = [];
  
  $scope.selecionar = function (campo)
  {
    var idx = $scope.campos_selecionados.indexOf(campo);
    
    idx >= 0 ? $scope.campos_selecionados.splice(idx, 1) : $scope.campos_selecionados.push(campo);
  };

})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>


<div ng-app="app" ng-controller="Ctrl">
  <label ng-repeat="campo in campos">
    <input type="checkbox" ng-checked="campos_selecionados.indexOf(campo) >= 0" ng-click="selecionar(campo)">
    {{ campo.nome }}
  </label>
  
  
  <pre>{{ campos_selecionados | json }}</pre>
</div>

4

É possível manter uma propriedade nos objetos que controle se ele foi selecionado ou não e tratar na hora de enviar para o servidor.

angular.module('app', []).controller("Ctrl", function ($scope){

  $scope.campos = [{nome: "Brasil"}, {nome: "Argentina"}, {nome: "Paraguai"}];
    
  $scope.enviar = function() {
    const camposSelecionados = $scope.campos
                                .filter(e => e.selecionado)
                                .map(e => ({ nome: e.nome }));
                                
    console.log(camposSelecionados);
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="Ctrl">
  <label ng-repeat="campo in campos">
    <input type="checkbox" ng-model="campo.selecionado">
    {{ campo.nome }}
  </label>  
  
  <pre>{{ campos | json }}</pre>  
  
  <button ng-click="enviar()">Enviar</button>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .