Arter Arter - 6 months ago 51
AngularJS Question

Multiply dropdown angularjs

on my web app, i need to have multiply dropdown box. All data is from json from my api. Ok, the my problem is, i know how to set data from api, but here i have 3 different url, one with country, second with states and third with city. Dropdown depending on selected country. on first drop down i need to select county (url: blabla/countries), then in second dropdown i need to set states for selected country (url: blabla/countries/countryId/states) and in third dropdown i need select city only for selected states (url: blabla/countries/countryId/states/statesId/city).
I don't know how to add id from selected country or states to url for next dropdown box.



$http.get('url')
.success(function(response)
{$scope.countryes=response;});

<div>
Country:
<select id="country" ng-model="country" ng-options="country.id as country.name for country in countryes">
<option value=''>{{countryes.name}}</option>
</select>
</div>
<div>
States <select id="city" ng-disabled="!country" ng-model="suburbs" ng-options="state as state.name for state in states"><option value='state'>Select</option></select>
</div>
<div>
City <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>
</div>





Thnx to everyone

Answer

use ng-change for county and state select

   <div>
  Country:
  <select id="country" ng-model="country" ng-options="country.id as country.name for country in countryes" ng-change='getState()'>
    <option value=''>{{countryes.name}}</option>
  </select>
</div>
<div>
  States
  <select id="city" ng-disabled="!country" ng-model="suburbs" ng-options="state as state.name for state in states"  ng-change='getCity()'>
    <option value='state'>Select</option>
  </select>
</div>
<div>

in controller ad new functions

$scope.getState = function(){
    //this function run when you select country
     $http.get('getStateUrl',{country: $scope.country})

}


$scope.getCity= function(){
     //this function run when you select state
     $http.get('getCityUrl',{state: $scope.suburbs})
} 
Comments