Display values with angular

Question

I have the following code:

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

and the outcome of console.log(retorno) is:

Now I’m trying to show the values of this return in a <select> of 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>

However it is not showing any value, but when inspecting the element I see the code below:

He’s assigning the values to <option> of <select> but on the page for the client to select nothing appears.

Someone’s already been through it?

NOTE: I am used {[ because I switched the configs.

app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[{').endSymbol('}]'); 
});

Answer 1

ufs is a array, not an object with keys and values.

Instead of using

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

Try

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

Answer 2

Dude, I tried to use that there

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

Take a look at ngResource, an example I did on my 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;

in controller only calls:

$scope.lista = ProcessosFactory.listar();

in html:

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

see if it helps your case.

Answer 3

The problem is that you are using [] in the value. You’re doing it this way:

[{value.sigla}]

The correct thing would be to use {{value.sigla}}

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