Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

html + angularjs - select com option vindo do banco de dados

por Roger Rayner
| 51.5k xp | 60 posts

Bom dia, Estou iniciando no mundo de desenvolvimento html + angularjs. Eu tenho um select no meu form que eu gostaria que viesse do meu banco. A parte de buscar do banco de dados e gravar em uma variável do meu controller está ok, já consegui fazer isso. Mas não sei como fazer para funcionar os tópicos abaixo.

1) Options serem mostrados conforme os registros retornados do banco de dados que eu salvo no array controller.planos.

2) Deixar selecionado o primeiro registro do array quando o form é aberto (hoje mesmo deixando os options fixos ele fica em branco quando abre o form)

3) Ao selecionar uma das opções do select gravar no meu controller.customer.planoSelecionado

Abaixo meu código do select como está hoje (com os options fixos).

                                <div class="col-md-4">
                                    <div class="form-group">                                                
                                        <div class="col-xs-12">
                                            <label for="cbPlanos" class="col-sm-2 control-label blue-font" style="width: 100%">Selecione o Plano:*</label>    
                                            <select class="form-control" 
                                                    name="cbPlanos" 
                                                    ng-model="controller.customer.planoSelecionado">
                                                <option>1 Mega</option>                                                    
                                                <option>2 Megas</option>                                                    
                                                <option>3 Megas</option>                                                    
                                                <option>5 Megas</option>                                                    
                                            </select>
                                        </div>                                
                                    </div>   
                                </div>

Obrigado pela ajuda.

3 respostas
solução!
por Lazaro Prates Junior
| 444.5k xp | 662 posts
Instrutor Instrutor

Olá.

De uma olhada na documentação do Angular, que lá tem o exemplo de um select usando o ngRepeat. É oq vc vai precisar:

https://docs.angularjs.org/api/ng/directive/select

por Roger Rayner
| 51.5k xp | 60 posts

Consegui fazer funcionar o select, a única coisa que não funciona é vir a primeira opção como default. Sempre vem em branco. Tentei fazer conforme o exemplo do manual do Angular mas não está funcionando. Consegue me dar uma dica do que estou errando?

JavaScript

        generalCtrl.planos = [];
        generalCtrl.planos.push({idPlano: 1, plano:"1 Mega",velocidade:1,valor:"11,00",instalacao:"21,00"});
        generalCtrl.planos.push({idPlano: 2, plano:"2 Megas",velocidade:2,valor:"12,00",instalacao:"22,00"});
        generalCtrl.planos.push({idPlano: 3, plano:"3 Megas",velocidade:3,valor:"13,00",instalacao:"23,00"});    

        generalCtrl.customer.plano = {
            idPlano: 1,
            plano: "1 Mega"
        }

HTML

                                    <div class="form-group">                                                
                                        <div class="col-xs-12">
                                            <label for="cbPlanos" class="col-sm-2 control-label blue-font" style="width: 100%">Selecione o Plano:*</label>    

                                            <select class="form-control"  name="cbPlanos" id="cbPlanos" ng-model="controller.customer.plano">
                                                <option ng-repeat="option in controller.planos" value="{{option.idPlano}}">{{option.plano}}</option>
                                            </select>
                                        </div>                                
                                    </div>
por Roger Rayner
| 51.5k xp | 60 posts

Boa tarde,

Consegui fazer funcionar com o código abaixo.

                                            <select class="form-control" name="cbPlanos" id="cbPlanos"
                                              ng-options="option.plano for option in controller.planos track by option.id"
                                              ng-model="controller.customer.plano"></select>

Obrigado pela ajuda.