How to pass a picklist (bootstrap) via POST (ajax)

Question

Good morning, I don’t know how to pass the data of this component to my controller java.

See image:

For example, I have these fields that I pass by request POST to my controller and they work OK, until the controller java:

BoxApp.controller("CadastroCertificadoController", function($scope, $http) {

    $scope.clientes = {};

    $scope.iniciar = function() {
        $http.get('/boxmlV2/cadastrocertificado').success(function(response) {
            $scope.clientes = response;
        });
    };

    $scope.iniciar();
    $scope.clientes2 = [];

    $scope.atribuirUm = function(index, c) {
        $scope.clientes2.push(c);
        $scope.clientes.splice(index, 1);
    }

    $scope.limparUm = function(index, c2) {
        $scope.clientes2.splice(index, 1);
        $scope.clientes.push(c2);
    }

    /*
    * Trecho para validar o form ao submeter.
    */
    $scope.submitted = false;
    $scope.submitForm = function(form) {
        $scope.submitted = true;
        if (form.$valid) {
            $scope.cadastraCertificado();
        }
    };

    $scope.cadastraCertificado = function() {
        $http.post('/boxmlV2/cadastrocertificado/salvaCertificado', {
            urlCertificado : $scope.certificadoIncluirAlterar.urlCertificado,
            dataValidadeCertificado : $scope.certificadoIncluirAlterar.dataValidadeCertificado.toString(),
            senhaCertificado : $scope.certificadoIncluirAlterar.senhaCertificado
            //picklist???
            //certificado
        }).then(function(response) {
            $scope.sucesso();
        }, function(response) {
        });
    };
});

But I don’t know how to pass the picklist that already works, taking from the base, the data I need to collect is the list on the right side.

How can I do that?

My picklist component:

<div class="form-group">
    <label class="control-label col-md-3">Empresas:</label>
    <div class="col-md-9">
        <select multiple="multiple" class="multi-select" id="my_multi_select1" name="my_multi_select1[]">
            <option ng-repeat="c in clientes" value="{{c.idCliente}}" ng-click="atribuirUm($index, c)">{{c.razaoSocial}}</option>
            <option selected ng-repeat="c2 in clientes2" value="{{c2.idCliente}}" ng-click="limparUm($index, c2)">{{c2.razaoSocial}}</option>
        </select>
    </div>
</div>

Thank you, in case you need more code, I’ll put it right.

---

Edited - save button:

<div class="modal-footer">
    <button type="button" class="btn btn-default"
        data-dismiss="modal">Cancelar</button>
    <button type="submit" class="btn btn-primary"
        ng-click="submitForm(form)">
        <i class="fa fa-check"></i> Salvar
    </button>
</div>

After applying the provided reply, I can receive the OK array, but it gives bad request 400 in the upload, I took the picklist as a test and I can pass the other attributes to the java controller successfully. I’m getting on the Java side, a String list with the same name, should work.

Answer 1

Well, first of all, I recommend you remove the data setting from within $http, use a variable instead, like this:

var dados = {
    urlCertificado :     $scope.certificadoIncluirAlterar.urlCertificado,
    dataValidadeCertificado : $scope.certificadoIncluirAlterar.dataValidadeCertificado.toString(),
    senhaCertificado : $scope.certificadoIncluirAlterar.senhaCertificado
};

Now to set the list of selected companies you have 2 modes to do this:

• Pass as parameter by the button calling the function;
• Grab directly from controller;

The second option only works (and in your case is even simpler) because the manipulation of companies is done within the same controller. If done elsewhere, it would not be possible to use the second method (which is what I will explain).

The first method would be like this:

<button type="submit" class="btn btn-primary"
    ng-click="submitForm(form, clientes2)">
    <i class="fa fa-check"></i> Salvar
</button>

And on the controller, when you receive the function, take it too:

$scope.submitForm = function(form, clientes2) { //....

Since yours is already inside the controller, you can skip this step and refer it directly through the $scope.clientes2 and merge with your existing data array (which I illustrated above), like this:

dados['empresas'] = $scope.clientes2; //ou dados['clientes2'], fica a seu critério

This will create a nested-array of data that you can just reference at $http and send, see:

$scope.cadastraCertificado = function() {       
    $http.post('/boxmlV2/cadastrocertificado/salvaCertificado', dados)
        .then(function(response) {
            $scope.sucesso();
        }, function(response) {         
    });
};