Problems loading content dynamically in a SELECT FIELD [ANGULAR JS]

Question

Hello thanks for help me. I have two select field, one select field for states, and other select for the cities. I am trying to load cities dinamically from the JSON generated in the server, when the user change the selected state.If you can help, many thanks..

JavaScript:

var geo = function(app){

app.controller("geoCtrl",function($scope, $http, geoFactory){   


 $scope.mcpios = [];
 $scope.dptos = [];


   $scope.$watch('dpto', function (nuevoValor, viejoValor) {

       if(!viejoValor || !nuevoValor) return;
       if (nuevoValor.id_departamento === viejoValor.id_departamento) { return; }

       geoFactory.actMucpios($scope.dpto.id_departamento).success(function(rs){

           console.log(rs[0]);
           $scope.mcpios = rs[0];

      }); 


    }, true);

     geoFactory.get().success( function(rs){

                $scope.dptos = rs[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>

I hope that you can help me... Thanks

ckruszynsky · Accepted Answer · 2014-05-29 00:17:29Z

0

I create the plunkr below that simulates making a call to a service to retrieve a list of states. Then when a state is selected it will retrieve from the object (or if you need you could request the list of states in the $scope.watch statement to retrieve the cities then set the list of cities to scope collection for the cities and each time you select a new state the list of cities will change.

Here's a link to see the working example : http://plnkr.co/edit/ntUblVSSoBzp053GuYvv?p=preview

edited May 29, 2014 at 0:17

answered May 28, 2014 at 22:55

ckruszynsky

5333 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Javier Gómez Mora Over a year ago

Hello thanks for help me. It's ok your example. I have two select field, one select field for states, and other select for the cities. I am trying to load cities dinamically from the JSON generated from server, when the user change the selected state. I don't need change the selection in second select field. If you can help, many thanks...

Collectives™ on Stack Overflow

Problems loading content dynamically in a SELECT FIELD [ANGULAR JS]

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related