如何在angularjs中根据所选国家/地区获取状态？答案

【问题标题】：How to get states base on selected country in angularjs?如何在angularjs中根据所选国家/地区获取状态？
【发布时间】：2016-03-19 12:40:49
【问题描述】：

我有这样的 JSON 数据。我有两个下拉列表：一个国家和一个州。根据选择的国家/地区，我想更新州下拉菜单。

$scope.countryOptions = [
        {
            'name': 'India',
            'value': 'india',
            'states': [
                {
                    'name': 'Arunachal Pradesh',
                    'value': 'arunachal-pradesh'
                },
                {
                    'name': 'Andhra Pradesh',
                    'value': 'andhra-pradesh'
                },
                {
                    'name': 'Assam',
                    'value': 'assam'
                },
            ]
        },
        {
            'name': 'United States',
            'value': 'united-states',
            'states': [
                {
                    'name': 'New York',
                    'value': 'new-york'
                },
                {
                    'name': 'Florida',
                    'value': 'florida'
                },
                {
                    'name': 'Massechussettes',
                    'value': 'massechussettes'
                },
            ]
        },
        {
            'name': 'Australia',
            'value': 'australia',
            'states': [
                {
                    'name': 'Victoria',
                    'value': 'victoria'
                },
                {
                    'name': 'Queensland',
                    'value': 'queensland'
                },
                {
                    'name': 'New South Wales',
                    'value': 'new-south-wales'
                },
            ]
        },
    ]

【问题讨论】：

看这个小提琴jsfiddle.net/annavester/Zd6uX
stackoverflow.com/questions/18723399/cascading-select-dropdowns
@Subin 提供了一个很好的代码示例。您将使用 Angular 的 ng-model 在元素和范围变量之间进行两种绑定。然后，您提供了针对该范围变量的逻辑，以操纵其他 ng-model 的状态。

标签： javascript angularjs

【解决方案1】：

  <select ng-model="country" ng-change="update(country)" ng-options="option.value as option.name for option in countryOptions ">
     <option ng-disabled="true"   ng-selected="true" value="">Select a country</option>
  </select>
<br /> <br /> <br /> 

  <select ng-model="state" ng-options="item as item.name for item in countryOptions[index].states " >
      <option ng-disabled="true"  ng-selected="true" value="">Select a state</option>
  </select>


    $scope.update=function(index){
      for(var i=0;i<countryOptions.length;i++){
        if(countryOptions.name == index){
          $scope.index= index;
        }
      }
    };

【讨论】：