Angular CheckBox

1
Good night, 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, so I decided to do a checkbox with the values (A, B, C, D). However, regardless of whether I select the checkbox or not, it goes as true to my service (REST wearing jersey). In my insert method, I declare the array of the checkboxes, and I already set the values true as default, I think I'm wrong at this point. How do I declare an array of chckbox belonging to my driver object out of this function? 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);
}
});
    
asked by anonymous 23.02.2017 / 04:21

1 answer

1

Your code has several problems:

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

Now a tip, take a look at the Angular Styleguide , which should just quote, since it has no direct connection with 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><divng-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>
    
23.02.2017 / 05:16