Question

在我的网络应用上，我需要有多个下拉框。所有数据都来自我的api的json。好吧，我的问题是，我知道如何从api设置数据，但在这里我有3个不同的网址，一个有国家，第二个有州，第三个有城市。下拉取决于所选国家/地区。在第一次下拉我需要选择县（网址：blabla /国家），然后在第二次下拉我需要设置所选国家的州（网址：blabla / countries / countryId / states）和第三次下拉我需要选择城市只为选定的州（网址：blabla / countries / countryId / states / statesId / city）。我不知道如何将所选国家/地区的ID添加到下一个下拉框的网址。

Order.findOneAndUpdate(
    {"_id": order_id},
    {$set: {order_status: order_status}},
    {new: true},
    callback
);

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

Thnx给大家

Answer 1

使用ng-change进行县和州选择

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

控制器广告中的

新功能

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

Answer 2

首先向@aseferov寻求帮助。如果将来有人会有同样的问题，这就是我的代码，我是怎么做到的。这是我的CTRL（我有三个不同的下拉，具体取决于之前下拉的ID）

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

    };

这是我的工厂

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>

乘以下拉角度

2 个答案: