I have a JSON of states and cities as follows:
{
"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"
]
}
and continues this way for all states of Brazil.
What I can not do is fill in a < select > (combo) with all states, and after selecting the state to fill another < select > listing all cities in this state.
What I did so far was:
$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>
Now the city does not know how to do according to the state selected.
Thank you!