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

26 thoughts on “Picklist (multi-select) component does not update data. BootStrap component + AngularJS”

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

    Reply

Leave a Comment