Question

有人可以帮助我举例说明Country / State下拉依赖工作吗？

我故意以这种方式创建JSON，因为我希望依赖项是通用的，所以我可以在任何下拉列表中应用它，同时只使用Meta Data而不是HTML。

这里有a link来查看JSFidlle中的代码示例

HTML

Country:<select data-ng-model="Countries" data-ng-options="country.id as country.name for country in Countries.items">
            <option value="">Please select a country</option>
        </select>

State: <select data-ng-model="currentItem" data-ng-options="item.id as item.name for item in currentStates.items">
            <option value="">Please select a state</option>
        </select>

JavaScript代码：

function Controller($scope) {

var Countries = {
    "id": "field10",
    "items": [{
                "id": "10",
                "StateGroupID":"0",
                "name": "United State"
              }, 
              {
                 "id": "2",
                 "StateGroupID":"1",
                 "name": "Canada"
              }]
};

var States =
    {   "id": "field20",
        "StateGroups": [{
            "items": [{  "id": "1",
                       "name": "Alabama"
                      }, 
                      {
                          "id": "2",
                          "name": "Alaska"
                      }, 
                      {  "id": "3",
                       "name": "Arizona"
                      }, 
                      {  "id": "4",
                       "name": "California"
                      }]},

                 [{  "id": "201",
                    "name": "Alberta"
                   }, 
                  {
                      "id": "202",
                      "name": "British Columbia"
                  }, 
                  {
                      "id": "303",
                      "name": "Manitoba"
                  }, 
                  {
                      "id": "304",
                      "name": "Ontario"
                  }]]
};

$scope.Countries = Countries;
$scope.currentStates = States.StateGroups[0];
$scope.$watch('currentStates', function(value, oldValue){
    //alert(value);
    //alert(JSON.stringify(value));
    //$scope.currentStates = (value == "10") ?  States.StateGroups[0] : States.StateGroups[1];
});

}

Answer 1

首先，我认为你的JSON有一点错误，你应该在加拿大各州之前有一个“项目”

          {"items": [{  "id": "201",
                    "name": "Alberta"
                   }, .....

执行此操作后，我会修改您的HTML，以便拥有2个不同的模型名称（您的方式，在第一次单击时覆盖国家/地区列表）。然后我将使用不同的ng-repeat语法，以强制值为StateGroupId

 <select data-ng-model="selectedCountry">
            <option ng-repeat='country in Countries.items' value='{{country.StateGroupID}}'>{{country.name}}</option>          
        </select>

执行此操作可以创建一个函数来获取所选组ID的状态：

 $scope.getStates=function(){
    console.log($scope.selectedCountry)
     return $scope.backupStates.StateGroups[$scope.selectedCountry].items;
}

然后您可以使用此功能使用ng-repeat

显示它们

            <select data-ng-model="selectedState" >
              <option value="">Please select a state</option>
              <option ng-repeat='state in getStates()'>{{state.name}}</option>
            </select>

我在这里修改了你的小提琴：http://jsfiddle.net/DotDotDot/TsxTU/14/，我希望这是你想要的那种行为：）

Answer 2

我建议你对你的数据模型进行一些重构 - 看起来很纠结。让我们将县和州存储在两个数组中：

$scope.countries = [{
    "name": "USA",
    "id": 1
  },{
    "name": "Canada",
    "id": 2
}];
$scope.states = [{
    "name": "Alabama",
    "id": 1,
    "countryId": 1
  }, {
    "name": "Alaska",
    "id": 2,
    "countryId": 1
  }, {
    "name": "Arizona",
    "id": 3,
    "countryId": 1
  }, {
    "name": "Alberta",
    "id": 4,
    "countryId": 2
  }, {
    "name": "British columbia",
    "id": 5,
    "countryId": 2
}];

有了这个，我们可以为数据编写select：

<select data-ng-model="country" data-ng-options="country.name for country in countries" data-ng-change="updateCountry()">
  <option value="">Select country</option>
</select>
<select data-ng-model="state" data-ng-options="state.name for state in availableStates">
  <option value="">Select state</option>
</select>

遗憾的是我们不能在选择器中使用if表达式 - 如果可以的话，我们不需要单行JS！但我们需要：

$scope.updateCountry = function(){
  $scope.availableStates = [];

  angular.forEach($scope.states, function(value){
    if(value.countryId == $scope.country.id){
      $scope.availableStates.push(value);
    }
  });
}

就是这样。 Here is a working plunk for you.

Answer 3

最简单的解决方法是在第二个选择中引用currentCountry，而无需使用$watch来满足您的要求。

<select data-ng-model="currentCountry" data-ng-options="country.name for country in Countries.items">

<select data-ng-model="currentItem" data-ng-options="item.id as item.name for item in States.StateGroups[currentCountry.StateGroupID].items">

的 Demo

Answer 4

<强>角国家选择器凉亭安装角度国家选择器（或） npm install angular-country-picker

<script src="bower_components/angular-country-picker/country-picker.js"></script>
<script src="node_modules/angular-country-picker/country-picker.js"></script>

       angular.module('webApp', ['puigcerber.countryPicker']);

       <select ng-model="selectedCountry" pvp-country-picker="name"></select>

       angular.module('myApp', ['puigcerber.countryPicker'])
       .config(function(pvpCountriesProvider) {
        pvpCountriesProvider.setCountries([
        { name: 'Abkhazia', alpha2: 'AB'},
        { name: 'Kosovo', alpha2: 'XK'},
        { name: 'Nagorno-Karabakh', alpha2: 'NK'},
        { name: 'Northern Cyprus', alpha2: 'KK'},
        { name: 'Somaliland', alpha2: 'JS'},
        { name: 'South Ossetia', alpha2: 'XI'},
        { name: 'Transnistria', alpha2: 'PF'}
      ]);
    });

Angularjs触发国家依赖

4 个答案: