Problemas com componente select

27 de junho de 2017 11 respostas Resolvido

josivanl 27 de junho de 2017

Estou com um problema ao apresentar a minha lista de itens do meu select.

Nesse meu HTML uso o ng-repeat para listar todos os itens, e quando minha tela é carregada meu primeiro e único item é: {{list.name}}, quando eu clico nesse item {{list.name}, ai carrega a lista de corretamente.

<select data-placeholder="Escolha uma Empresa/Filial" multiple chosen
                                style="width: 100%;"
                                ng-model="filtroRequisicao.codigoSistemaUsuariosFiliais"
                                required>
                            <option ng-repeat="list in lista" ng-value="list.id">
                                {{list.name}}
                            </option>
                        </select>

Angularjs:

$scope.lista = [{}];

    //Carrega as Filiais dos Cooperados
        $scope.loadFiliais = function () {
            var usuario = localStorage.getItem("usuarioAutenticado");
            var objetoUsuario = {};

            objetoUsuario = JSON.parse(usuario);


            $http({
                method: 'PUT',
                url: '/getFiliais',
                data: objetoUsuario
            }).then(function (response) {

                    $scope.lista = response.data;

                    console.log($scope.lista);
                },

                function (response) {
                    console.log(response.data);
                    $scope.showNoty('Nenhum dado encontrado.', 'information');
                });
        };

        $scope.loadFiliais();

Se alguém puder dar alguma dica, agradeço!

11 Respostas

Aporo 27 de jun. de 2017

Tenta iniciar sua lista assim:

$scope.lista = [];

josivanl 27 de jun. de 2017

Se eu iniciar a minha lista dessa forma que indicou, não aparece nem {{list.name}} o select fica totalmente vazio.

Alguma outra sugestão? Não sei mais o que posso alterar para resolver isso, já procurei em diversos locais uma solução, mas até agora nada.

Obrigado

Aporo 27 de jun. de 2017

Coloca a saída do seu console.log

josivanl 27 de jun. de 2017

Já fiz isso, aparecem os itens da lista, Id e Name.

Aporo 27 de jun. de 2017

Sim, coloca ai os itens da lista pra gente ver como ta sendo montada.

josivanl 27 de jun. de 2017

Segue o log da lista.

josivanl 27 de jun. de 2017

Uma coisa que percebi agora, foi iniciar a minha lista fora de uma chamada do method PUT do angular.

$scope.lista =
            [
                {
                    'id': 1,
                    'name': 'American Black Bear',
                },
                {
                    'id': 2,
                    'name': 'Asiatic Black Bear',
                },
                {
                    'id': 3,
                    'name': 'Brown Bear',
                },
                {
                    'id': 4,
                    'name': 'Giant Panda',
                },
                {
                    'id': 5,
                    'name': 'Sloth Bear',
                },
                {
                    'id': 6,
                    'name': 'Sun Bear',
                },
                {
                    'id': 7,
                    'name': 'Polar Bear',
                },
                {
                    'id': 8,
                    'name': 'Spectacled Bear',
                }
            ];

E depois quando a função é executada:

A lista se mantem a mesma, ou seja, deveria ter atualizado com o retorno da chamada:

“josivanl:

$scope.lista = response.data;

O meu select apresenta todo os itens que foi iniciado o $scope.lista e não os itens que recebe no meu response.data.

Como faço para resolver isso?

Aporo 27 de jun. de 2017

O que pode estar acontecendo é que sua função $scope.loadFiliais(); não esteja sendo executada ai iniciar seu controller, se esse for o caso faça ela retornar sua lista e chame ela no ng-repeat diretamente:

ng-repeat="list in loadFiliais()"

josivanl 28 de jun. de 2017

Fiz esse teste, usando no ng-repat usando uma função, e não deu certo.

O que ocorre é que no momento em que carrega a minha tela html o meu $scope.lista fica assim:

$scope.lista = []

Depois que é chamado a minha função

“josivanl:

$scope.loadFiliais();

A minha variável fica com os valores conforme imagem que postei anteriormente, mas o meu select/repeat já está preenchido com o valor primário da minha variável $scope.lista = []

Sabe como posso resolver isso, que o meu html (select/repeat) somente seja preenchido depois da minha função ser executada?

Tentei usar o ng-cloak, mas não tive suceso, continua sem carregar os valores corretamente

ng-cloak:

html:

<style>
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x- ng-cloak {
        display: none !important;
    }
</style>

<select data-placeholder="Escolha uma Situação" multiple class="ng-cloak" chosen
                                style="width: 100%;"

                                ng-model="filtroRequisicao.codigoLogisticaGLGLDocumentoSituacao"
                                required
                                ng-options="opt.name for opt in lista">
                        </select>

raphaeloneves 28 de jun. de 2017

Por favor, tente isso:

$scope.loadFiliais = function () {
	var usuario = localStorage.getItem("usuarioAutenticado");
	var objetoUsuario = {};
	objetoUsuario = JSON.parse(usuario);
	
	var lista = $http({method: 'PUT', url: '/getFiliais', data: objetoUsuario}).then(
		function (response) {
			return response.data;
		},
		function (response) {
			console.log(response.data);
			$scope.showNoty('Nenhum dado encontrado.', 'information');
		}
	);
	return lista;
	
};

Solucao aceita

josivanl 28 de jun. de 2017

Consegui resolver utilizando o ng-if, onde ele remove o elemento e cria novamente conforme a expressão:

ngIf

angular:

Inicia a variável:
$scope.lista = null;

chama a função $scope.listaFiliais();

html:

<select data-placeholder="Escolha uma Empresa/Filial" multiple chosen
                                style="width: 100%;"
                                ng-if="lista != null"
                                ng-model="filtroRequisicao.codigoSistemaUsuariosFiliais"
                                required>
                            <option ng-repeat="list in lista" ng-value="list.id">
                                {{list.name}}
                            </option>
                        </select>

Eu não sei se essa é a melhor forma, mas resolveu o problema.

Criado 27 de junho de 2017

Ultima resposta 28 de jun. de 2017

Respostas 11

Participantes 3

11 Respostas

Topicos relacionados