Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Dúvida

Bom dia!

Digamos que ao trocar o valor do

<select><option>Exemplo 1</option></select>

eu queira realizar uma requisição ajax e carregar outro

<select><option>Exemplo 2</option></select>

Existe alguma maneira de fazer tudo pelo angularJS, sem usar a biblioteca do jQuery?

8 respostas

o Exemplo 1 e Exemplo 2 são selects. Achei que fosse renderizar o html se colocasse entre as tags HTML

Não exibiu código pq vc não usou a marcação especial indicada em formatação para exibir código. Eu editei e coloquei.

Voce pode executar uma ação no controller quando mudarem o valor do select com ng-change. No seu controller só executar req Ajax e pegar os dados do outro select.

Oi Flavio.

Obrigado pela agilidade.

Pode me dar um exemplo na prática? Ou até mesmo me indicar um link com o exemplo?

Abraços

Posso sim, só me dá um tempinho. Daqui há uma hora eu posto, tudo bem?

Ok Flávio.

Agradeço desde já.

Abraços

solução!

Vamos pelo problema clássico de selecionar uma cidade em uma combo e mostrar seus bairros em outra. Tudo bem? Essa é a marcação HTML:

<div ng-controller="CidadesController">
    <select name="grupo" ng-change="buscarBairros(cidade)"
        ng-model="cidade.sigla" 
        ng-options="cidade.sigla as cidade.nome for cidade in cidades">
        <option value="">Escolha um Cidade</option>
    </select>

    <select name="grupo" 
        ng-model="bairro.nome" 
        ng-options="bairro.nome as bairro.nome for bairro in bairros">
        <option value="">Escolha um Bairro</option>
    </select>
</div>

Veja que os dois selects estão sendo gerenciados por CidadesController. Veja que no primeiro select, temos a diretiva ng-chance. Ela chamará um código em seu controller toda vez que o valor do select mudar. Quando você selecionar uma cidade, ele vai buscar os bairros daquela cidade e atualizará o outro select.

Seu controller:

angular.module('alurapic').controller('CidadesController', function($scope) {

    $scope.bairros = [];
    $scope.cidades = [{sigla: 'RJ', nome: 'Rio de Janeiro'}, {sigla: 'SP', nome: 'São Paulo'}];

    $scope.buscarBairros= function(cidade) {

        // claro, aqui você teria que acessar um serviço, passar o ID da cidade e receber a lista de bairros. Aqui fiz algo fake só para ilustrar.
        if(cidade.sigla == 'RJ') {
            $scope.bairros = [{nome: 'Maracanã'}];
        } else {
            $scope.bairros = [{nome: 'São Paulo'}];
        }

    };
});

Veja que como estamos alterando a lista de bairros no controller, automaticamente o segundo select será atualizado para exibir a lista de bairros, tudo devido ao data binding do Angular.

Eu teste aqui jogando esse código no projeto rapidinho e funciona.

Espero ter ajudado, bom estudo!

Tudo certo Renan? Podemos fechar essa questão?

Muito obrigado Flavio.

Podemos encerrar sim.

Abraços

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software