ウェブアプリケーションにドロップダウンの角度を掛ける

Question

、私は複数のドロップダウンボックスが必要です。すべてのデータは私のAPIのjsonからのものです。私の問題は、私はAPIからデータを設定する方法を知っていますが、ここで私は3つの異なるURLを持っています。選択した国に応じてドロップダウンを行います。 （url：blabla/countries）、次に2番目のドロップダウンで選択した国（url：blabla/countries/countryId/states）と3番目のドロップダウンで州を設定する必要がある選択された州（url：blabla/countries/countryId/states/statesId/city）。 選択した国または州のIDを次のドロップダウンボックスのURLに追加する方法がわかりません。

$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郡と状態のため、誰も

Answer 1

使用ng-changeにコントローラー広告の新機能

$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}) 
} 

で

<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> 

を選択10

Answer 2

最初のthnxから@aseferovへのヘルプ。 将来誰かが同じ質問をした場合、これは私のコードです、どうすればいいですか？

app.controller('myCtrl', ['$scope', '$routeParams', 'narudzbaResourceFactory', 'narudzbaResourceStatesFactory', 'narudzbaResourceStatesCityFactory', 
function ($scope, routeParams, narudzbaResourceFactory, narudzbaResourceStatesFactory, narudzbaResourceStatesCityFactory) { 

    narudzbaResourceFactory.query(function (res) { 
     $scope.countries = res; 
    }); 
    $scope.getState = function() { 

     $scope.states = narudzbaResourceStatesFactory.query({country: $scope.country.id}); 

    }; 

    $scope.getCity = function() { 
     $scope.cities = narudzbaResourceStatesCityFactory.query({state: $scope.state.id}); 

    }; 

を（私は、3つの異なるドロップダウンダウンの前に、ドロップからのIDに依存している）これは私のCTRLであり、これは私の工場

app.factory('narudzbaResourceFactory', ['$resource', 
function ($resource) { 
    var countries = $resource('/locationlist/countries', { 
     query: {method: 'GET', isArray: true 
     } 
    }); 
    return countries; 
}]); 

app.factory('narudzbaResourceStatesFactory', ['$resource', 
function ($resource) { 
    var states = $resource('locationlist/countries/:country/states', {country: '@country'}, { 
     query: {method: 'GET', isArray: true 
     } 
    }); 
    return states; 
}]); 

app.factory('narudzbaResourceStatesCityFactory', ['$resource', 
function ($resource) { 
    var cities = $resource('/locationlist/states/:state/cities', 
      {state: '@state'}, { 
     query: {method: 'GET', isArray: true 
     } 
    }); 
    return cities; 
}]); 

され、ビューに私はこの

ようにそれを使用します

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