How to use an angular input checkbox using Array?

Question

I’m trying to use a Array in a input[type=checkbox] with Angular 1, but was unsuccessful.

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>

In the example above, the Array, even when the checkbox is not selected, it is marked as null.

How can I make my checkbox generate a Array with the items that were selected?

Answer 1

My solution to this was not to use the ng-model. Instead, I set a function executed when there is a click on checkbox and check if the item is selected through the indexOf in the directive ng-checked.

Behold:

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>

Answer 2

It is possible to keep a property on the objects that control whether it was selected or not and handle when sending to the server.

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>