0

Tenho o seguinte codigo:

$http.get('/estados').success(function(retorno) {
    $scope.ufs = retorno.ufs;
    console.log(retorno);
});

e o resultado do console.log(retorno) é:

inserir a descrição da imagem aqui

Agora estou tentando mostrar os valores deste retorno em um <select> do HTML:

<section class="input-field col l1 s12">
    <i class="material-icons prefix">public</i>
    <select name="uf" required="true">
        <option ng-repeat="(key, value) in ufs">[{value.sigla}]</option>
    </select>
</section>

Porém não está mostrando valor nenhum, mas ao inspecionar o elemento vejo o código abaixo:

inserir a descrição da imagem aqui

Ele está atribuindo os valores aos <option> do <select> porém na página para o cliente selecionar não aparece nada.

Alguém já passo por isso?

OBS: Estou usado {[ porque troquei nas configs.

app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[{').endSymbol('}]'); 
});
8
  • Quando você da faz isso: console.log(retorno.ufs) qual o resultado? Commented 2/04/2016 às 19:55
  • Tenta colocar o ng-repeat no select Commented 2/04/2016 às 19:57
  • @Techies o resultado de console.log(retorno.ufs) é igual, so muda que na primeira linha fica [Object, Object....]`
    – MeuChapeu
    Commented 2/04/2016 às 20:00
  • Tentou colocar o ng-repeat no select? @MeuChapeu Commented 2/04/2016 às 20:13
  • 1
    Eu particularmente uso o ng-options no select: docs.angularjs.org/api/ng/directive/ngOptions Commented 2/04/2016 às 20:19

3 Respostas 3

1

ufs é um array, não um objeto com chaves e valores.

Ao invés de utilizar

<option ng-repeat="(key, value) in ufs">[{value.sigla}]</option>

Tente

<option ng-repeat="value in ufs">{{value.sigla}}</option>
0

O problema é que você está usando [] no binding do value. Você está fazendo dessa forma:

[{value.sigla}]

O correto seria utilizar {{value.sigla}}

Exemplo: http://jsfiddle.net/81t6cbjw/25/

6
  • Eu mudei as configs de {{ para {[
    – MeuChapeu
    Commented 2/04/2016 às 20:35
  • Não entendi @MeuChapeu Commented 2/04/2016 às 20:36
  • Desconfio que seja algo do frameworks css o materialize, pq desabilitando funciona...
    – MeuChapeu
    Commented 2/04/2016 às 20:36
  • No meu código tenho: app.config(function($interpolateProvider) { $interpolateProvider.startSymbol('[{').endSymbol('}]'); }); o que me permite usar {[ ao invés de {{.
    – MeuChapeu
    Commented 2/04/2016 às 20:37
  • Ah sim, agora entendi. Commented 2/04/2016 às 20:38
0

Cara já tentei utilizar isso ai

$http.get('/estados').success(function(retorno) {
    $scope.ufs = retorno.ufs;
    console.log(retorno);
});

Da uma olhada no ngResource, um exemplo que fiz no meu service.

 var services = angular.module('ProcessoService', ['ngResource']);

    services.factory('ProcessosFactory', function($resource,apiUrl){
      var resource = $resource('http://restTest/retornos');

      var factory = {
          listar: function () {        
              var lista = resource.query({}, function(data){
                 lista = data;
              });
              return lista;
          }


      }


  return factory;

no controller só chama:

$scope.lista = ProcessosFactory.listar();

no html:

<tr ng-repeat="processo in processos">
            <td>{{ processo.id }}</td>
<tr>

vê se ajuda no seu caso.

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 .