Checkbox in Angular

Question

Good evening, guys, I’m a beginner in the development of apps using Angular, and currently, I came across the following situation: I need to register a certain driver, the same has categories on CNH, I then decided to do a checkbox with the values (A,B,C,D). However, whether I select the checkbox or not, it goes as true to my service (REST using jersey). In my Insert method, I declare the checkbox array and already set true values to default, I think I’m missing this point. How do I declare a chckbox array belonging to my driver object outside of this function? Dese already thank you!

my view:

<div ng-app="Motorista" ng-controller="motoristaController as vm">
<fieldset>
                      <legend> Categoria CNH </legend>
                      <input type="checkbox" ng-model="vm.motorista.categoria_cnh.value1" />A
                      </br>
                      <input type="checkbox" ng-model="vm.motorista.categoria_cnh.value2" />B
                      </br>
                      <input type="checkbox" ng-model="vm.motorista.categoria_cnh.value3" />C
                      </br>
                      <input type="checkbox" ng-model="vm.motorista.categoria_cnh.value4" />D
                      </br>
                      <input type="checkbox" ng-model="vm.motorista.categoria_cnh.value5" />E
                      </br>
</fieldset>
<input type="button" ng-click="vm.inserir()" value="Inserir"/>
</div>

my controller:

var linkservice = "http://localhost:8080/Cast_Frotas/rest/motorista/";

var app = angular.module('Motorista',[]);

app.controller('motoristaController', function ($scope, $http) {

      //vm.inserir = inserir;

      iniciar();

      function iniciar() {
        this.motorista = {};
        this.motorista.categoria_cnh = {
            value1 : true,
            value2 : true,
            value3 : true,
            value4 : true,
            value5 : true
        };
      }

//PEGANDO ITENS DA SESSION STORAGE
/*var motorista = window.localStorage.getItem('motorista');
$scope.motorista = JSON.parse(motorista);*/

$http.get(linkservice + "select").then(function (response) {    
    $scope.registros = response.data;
});

$http.get(linkservice + "selectPrestador").then(function (response) {
    $scope.prestadores = response.data;
});

$http.get(linkservice + "selectCurso").then(function (response) {
    $scope.cursos = response.data;
});

$scope.inserir = function (){

        alert(this.motorista.categoria_cnh);

    $scope.jsonObj = angular.toJson($scope.motorista, false);
}
});

Answer 1

Your code has several problems:

• The field reference in your HTML is as categoria_cnh.value1 when these attributes would belong to the driver, then the correct one would be motorista.categoria_cnh.value1;
• Is using the categoria_cnh as a array when it should actually be an object, so there’s no need to use [], only {};
• Did you say use the = to assign value. Example: vm.motorista.categoria_cnh = {...};;
• You are assigning the values within the function incluir, then every time you call this function, you are overwriting the values;

Now a hint, take a look at Angular Styleguide, which should only be mentioned, since it has no direct link to the question. I rewrote your code using all these tips:

angular
  .module('meuApp', []);

angular
  .module('meuApp')
  .controller('MeuController', MeuController);

MeuController.$inject = [];

function MeuController() {
  var vm = this;
  vm.inserir = inserir;

  iniciar();
  
  function iniciar() {
    vm.motorista = {};
    vm.motorista.categoria_cnh = {
        value1 : true,
        value2 : true,
        value3 : true,
        value4 : true,
        value5 : true
    };
  }

  function inserir() {
    console.log(vm.motorista);
  }
}

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

<div ng-app="meuApp">
  <div ng-controller="MeuController as vm">
    <fieldset>
      <legend> Categoria CNH </legend>
      <input type="checkbox" ng-model="vm.motorista.categoria_cnh.value1" />A
      </br>
      <input type="checkbox" ng-model="vm.motorista.categoria_cnh.value2" />B
      </br>
      <input type="checkbox" ng-model="vm.motorista.categoria_cnh.value3" />C
      </br>
      <input type="checkbox" ng-model="vm.motorista.categoria_cnh.value4" />D
      </br>
      <input type="checkbox" ng-model="vm.motorista.categoria_cnh.value5" />E
      </br>
    </fieldset>
    <input type="button" ng-click="vm.inserir()" value="Inserir"/>
  </div>
</div>