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!