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

I have a project based on JSP + AngularJS.

In my JSP, I have a picklist component provided by a bootstrap template. I am receiving data from my DB, the name os the companies I need to work with, but I still can not “pass” the ones I choose to the side of the selected ones. check image to understand. Any information would be helpful. Thanks.

enter image description here

My AngularJS controller:

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 in my jsp page:

<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 (just bring data from my DB filling a previous table)

@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();
    }
}

Answer

Done.

This is how my component looks like:

<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>

This is my AngularJS controller:

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);
    }
});

enter image description here

Leave a Reply

Your email address will not be published. Required fields are marked *