Hey there, I need some assistance. I have two select fields, one for states and the other for cities. My goal is to dynamically load cities from a JSON generated on the server when the user changes the selected state. Any help would be greatly appreciated.
JavaScript:
var geo = function(app){
app.controller("geoCtrl",function($scope, $http, geoFactory){
$scope.mcpios = [];
$scope.dptos = [];
$scope.$watch('dpto', function (newVal, oldVal) {
if(!oldVal || !newVal) return;
if (newVal.id_departamento === oldVal.id_departamento) { return; }
geoFactory.actMucpios($scope.dpto.id_departamento).success(function(result){
console.log(result[0]);
$scope.mcpios = result[0];
});
}, true);
geoFactory.get().success( function(result){
$scope.dptos = result[1];
$scope.dpto = $scope.dptos[0];
});
});
app.factory("geoFactory", function($http){
var factory = {};
factory.get = function(){
return $http.get("aplicacion/controladores/controlador_geo.php?listar");
};
factory.actMucpios = function(id_dpto){
return $http.get("aplicacion/controladores/controlador_geo.php?listar&id_dpto=" + id_dpto);
}
return factory;
});
}
HTML:
<select ng-controller="geoCtrl" ng-change="actulizar()" ng-model="dpto" class="col-md-12" ng-options="dpto.nombre for dpto in dptos" >
<option ng-repeat-start>Seleccione un Departamento</option>
<option value="{{dpto.id_departamento}}" ng-repeat="dpto in dptos">{{dpto.nombre}}</option>
</select>
<select ng-model="mcpio" class="col-md-12" ng-controller="geoCtrl">
<option ng-repeat-start>Seleccione una Ciudad</option>
<option value="{{mcpio.id}}" ng-repeat="mcpio in mcpios | filter:dpto.id">{{mcpio.nombre}}</option>
</select>
Any assistance you can provide would be much appreciated. Thank you!