Picklist (multi-select) component does not update data. BootStrap + AngularJS

Question

Picklist (multi-select) component does not update data. BootStrap + AngularJS

Navigation

#1 by (2 votes)

0

Good morning, I have a registration screen, a jsp with a modal where I implemented a picklist based on Bootstrap templates.

I need to select from my bank companies (doing this) on one side and move to the other side of the selected ones (which it does not), see image.

AngularJScontroller:

BoxApp.controller("CadastroCertificadoController", function($scope, $http) {
    $scope.clientes = {};

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

    $scope.iniciar();
});

My component picklist in jsp:

<div class="form-group">
    <label class="control-label col-md-3">Empresas:</label>
    <div class="col-md-9">
        <select ng-model="certificadoIncluirAlterar.razaoSocial" multiple="multiple" class="multi-select" id="my_multi_select1" name="my_multi_select1[]">
            <option ng-repeat="c in clientes" value="{{c.idCliente}}">{{c.razaoSocial}}</option>
        </select>
    </div>
</div>

My java Controller (only loads data from the client table on the screen):

@Controller
public class CadastroCertificadoController {

    @Autowired
    private ClienteService clienteService;

    @RequestMapping(value = "/cadastrocertificado", method = RequestMethod.GET)
    public ModelAndView iniciar(ModelMap modelMap) {
        return new ModelAndView("cadastrocertificado");
    }

    @RequestMapping(value="/cadastrocertificado", method=RequestMethod.GET, produces={"application/json"})
    public @ResponseBody List<ClienteDTO> obterTodos(ModelMap modelMap){
        return clienteService.obterTodos();
    }
}

I do not know what may be happening, any help is valid. Thank you.

Mock data, works like this:

                                                <select ng-model="certificadoIncluirAlterar.razaoSocial" multiple="multiple" class="multi-select"
                                                id="my_multi_select1" name="my_multi_select1[]">
                                                <option>Teste 1 </option>
                                                <option>Teste 2 </option>
                                                <option>Teste 3 </option>
                                                <option>Teste 4 </option>
                                                <option>Teste 5 </option>
                                                <option>Teste</option>                                                  <
                                                <option selected>Teste 6</option>
                                                <option selected>Teste 7</option>

                                                </select>

angularjs

asked by anonymous 13.01.2016 / 13:15

1 answer

add to array after loop Error when establishing a connection with the Database

score 2 · Accepted Answer

Well, the manipulation of data esquerda <-> direita is relatively simple.

In theory you need to do the following:

Have an empty array;

Have a function to receive the selected company and move to the right;

This function will receive the data and add to the new array, which until then was empty;

A separate function to submit by submitting the data you need;

To create the empty array, I recommend you do it as follows:

$scope.novaLista = [];
$scope.novaLista['listaSeleciona'] = {};
var newArray; //vamos usar isso posteriormente

This way you will have a 'nested-array', you can send other data together, if you know how an array works, you will understand perfectly.

To add it, simply use the following method:

$scope.novaLista['listaSeleciona'].push('newArray');

So you will enter the variable newArray within that list, which was reserved to display the companies that will be selected

Now to generate the data to be inserted, let's assume your list of companies looks like this:

$scope.empresas = [
    {id:1, razao: 'Empresa ME', tel: '9966-5588'},
    {id:2, razao: 'Negócio ME', tel: '9966-5588'},
    //...
];

You now need to select the company you want to add, and call the function to do this, which would be assigned to the button between the two columns.

$scope.adicionarEmpresa = function(data) {
    newArray = {id: data.id, razao: data.razao}; //Assim você seleciona só os campos que deseja. Conseguiu entender a lógica?
    $scope.novaLista['listaSeleciona'].push('newArray'); //Insere o novo objeto;
};

To determine which object is selected, you can do so (did not test this then test before):

<option ng-click="meuElemento = c" ng-repeat="c in clientes" value="{{c.idCliente}}">{{c.razaoSocial}}</option>

And the button to call the function to add the company use:

<button ng-click="adicionarEmpresa(meuElemento)">Adicionar</button> //é o botão com a seta dupla que tem na sua imagem

This is the general logic, now you need to apply to your model, since you have other data and even an input sending file.