0

Bom dia, tenho uma tela de cadastro, uma jsp com um modal onde implementei um picklist baseado nos templates Bootstrap.

Eu preciso selecionar do meu banco as empresas (está fazendo isso) de um lado e passar para o outro lado as selecionadas (o que não faz), veja imagem.

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

Meu component picklist na 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>

Meu Controller java (somente carrega dados da tabela cliente na tela):

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

Não sei o que pode estar acontecendo, qualquer ajuda é válida. Obrigado.

Dados mockados, funcionam desta forma:

                                                <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>
4
  • Como você está fazendo a função para pegar da coluna da esquerda e jogar para a direita? É pelo Angular ou algum JS (ou js do bootstrap)? Commented 13/01/2016 às 12:44
  • Celsom, sou novo com Angular e js na verdade, é justamente isto que quero fazer. Só sei fazer mockando os dados, não tenho idéia como passar os dados pro outro lado. Editei a pergunta com o exemplo com os dados mockados, ai funciona mas pode ver que é uma tag que define o que foi pro outro lado. Commented 13/01/2016 às 12:51
  • Na verdade, apenas jogar para o outro lado, é simples. Mas, antes de elaborar a resposta, uma dúvida, qual a finalidade? Você vai cadastrar em um banco depois? Precisa ir com mais dados? Ou só a lista de empresas? Ou.. vai ser somente uma empresa ou podem ser múltiplas empresas? Commented 13/01/2016 às 12:54
  • Isto Celsom, os registros (lista) que serão passados pro lado direito (selecionado) vão ser enviados para o controller java onde vou salvar no banco. Precisa ir com o id da empresa e a razaosocial, preciso do id pra inserir no banco. Obrigadoo ! Commented 13/01/2016 às 13:10

1 Resposta 1

2

Bom, a manipulação do dado esquerda <-> direita é relativamente simples.

Na teoria você precisa fazer o seguinte:

  1. Ter uma array vazia;
  2. Ter uma função para receber a empresa selecionada e passar para a direita;
  3. Essa função irá receber os dados e adicionar na nova array, que até então estava vazia;
  4. Uma função a parte para fazer o submit enviando os dados que você precisa;

Para criar a array vazia, recomendo que faça da seguinte forma:

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

Deste modo você terá uma 'nested-array' podendo mandar outros dados juntos, se você sabe como funciona uma array, vai entender perfeitamente.

Para adicionar ela, basta usar o seguinte método:

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

Assim você irá inserir a variável newArray dentro daquela lista, que estava reservada para exibir as empresas que serão selecionadas

Agora para gerar os dados a serem inseridos, vamos supor que a sua lista de empresas seja assim:

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

Você precisa agora selecionar a empresa que deseja adicionar, e chamar a função para fazer isso, que seria atribuída ao botão que fica entre as duas colunas.

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

Para determinar qual objeto está selecionado, você pode fazer assim (não testei isso, então, teste antes):

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

E o botão para chamar a função para adicionar a empresa use:

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

Essa é a lógica geral, agora você precisa aplicar ao seu modelo, pois você possuí outros dados e, inclusive, um input de envio de arquivos.

3
  • 2
    A resposta do @CelsomTrindade está ótima, fiz um exemplo rápido pois estou um pouco sem tempo, mas basicamente seria isso: jsfiddle.net/sinkz/HB7LU/22159 Commented 13/01/2016 às 13:37
  • Muito obrigado aos dois dei vote up tbm ! abs Commented 13/01/2016 às 15:15
  • funcionou perfeitamente !!!!!!!!!!! Commented 13/01/2016 às 16:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .