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

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

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

17/12/2016

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

17/12/2016

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

17/12/2016

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.