1

Tenho um JSON de estados e cidades da seguinte forma:

{
  "estados": [
    {
      "sigla": "AC",
      "nome": "Acre",
      "cidades": [
        "Acrelândia",
        "Assis Brasil",
        "Brasiléia",
        "Bujari",
        "Capixaba",
        "Tarauacá",
        "Xapuri"
      ]
    },
    {
      "sigla": "AL",
      "nome": "Alagoas",
      "cidades": [
        "Água Branca",
        "Anadia",
        "Arapiraca"
      ]
}

e continua dessa forma para todos os estados do brasil.

O que não estou conseguindo fazer é preencher um < select > (combo) com todos estados, e após selecionar o estado preencher outro < select > listando todas as cidades deste estado.

O que fiz até o momento foi:

$scope.ListarEstados = function GetEstados(){
        var listaEstados = estadosCidadesService.GetEstados();
        listaEstados.then(function(response){
            console.log(response.data);
            $scope.ListEstados = response.data.estados.map(function(retAPI){                
                return{
                    UF: retAPI.sigla,
                    NOMEUF: retAPI.nome    
                };    
            });

        });                     
    };

o .html

  <div class="form-group">
        <label class="control-label">Estado</label>
     <select ng-model="estadoscidades.ESTADO" class="form-control">
        <option ng-repeat="e in ListEstados">{{e.UF}}</option>
     </select>
 </div> 

Agora o da cidade não sei como fazer de acordo com o estado selecionado.

Obrigado!

1 Resposta 1

0

Eu faria com essa lógica, trazendo os dados e colocando em uma variável sem modificar os seus dados ou formatar, depois disso é só utilizar ng-Options e duas variáveis para carregar as informações do retorno, ou seja, pegue o resultado do GetEstados() e passe como no meu exemplo que está fixo para a variável $scope.json o resto o AngularJs faz, exemplo minimo:

Exemplo 1:

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {  
  $scope.json = {
    "estados": [{
        "sigla": "AC",
        "nome": "Acre",
        "cidades": [
          "Acrelândia",
          "Assis Brasil",
          "Brasiléia",
          "Bujari",
          "Capixaba",
          "Tarauacá",
          "Xapuri"
        ]
      },
      {
        "sigla": "AL",
        "nome": "Alagoas",
        "cidades": [
          "Água Branca",
          "Anadia",
          "Arapiraca"
        ]
      }
    ]
  };
  $scope.uf = $scope.json.estados[0];  
  $scope.cidade = $scope.uf.cidades[0];  
  $scope.setCidadeFirst  = function()
  {
    $scope.cidade = $scope.uf.cidades[0];
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <div>
    <label class="control-label">Estados:</label>
    <select class="form-control" 
      ng-model="uf" 
      ng-options="a.sigla for a in json.estados"
      ng-change="setCidadeFirst()">   
   </select>
  </div>
  <div>
    <label class="control-label">Cidades:</label>
    <select class="form-control"
    ng-model="cidade"
    ng-options="item for item in uf.cidades">   
   </select>
  </div>  
</div>


Exemplo 2:

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {  
  $scope.json = {
    "estados": [{
        "sigla": "AC",
        "nome": "Acre",
        "cidades": [
          "Acrelândia",
          "Assis Brasil",
          "Brasiléia",
          "Bujari",
          "Capixaba",
          "Tarauacá",
          "Xapuri"
        ]
      },
      {
        "sigla": "AL",
        "nome": "Alagoas",
        "cidades": [
          "Água Branca",
          "Anadia",
          "Arapiraca"
        ]
      }
    ]
  };
  $scope.uf = $scope.json.estados[0];    
  $scope.setCidadeFirst = function()
  {
    $scope.cidade = 0;  
  }
  $scope.setCidadeFirst();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <div>
    <label class="control-label">Estados:</label>
    <select class="form-control" 
      ng-model="uf" 
      ng-options="a.sigla for a in json.estados"
      ng-change="setCidadeFirst()">   
   </select>
  </div>
  <div>
    <label class="control-label">Cidades:</label>
    <select class="form-control"
    ng-model="cidade">       
    <option value="0" selected>Escolha a Cidade</option>
    <option ng-repeat="c in uf.cidades" value="{{c}}">
      {{c}}
    </option>
   </select>
  </div>  
</div>

Referencias:

2
  • Obrigado. Teria como ao selecionar o estado ao invés de carregar para a primeira cidade, ficar escrito <<escolha a cidade>>?
    – Core
    Commented 15/11/2017 às 13:02
  • @Core fiz outro exemplo!
    – novic
    Commented 15/11/2017 às 18:46

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 .