Javascript Angularjs触发国家-国家依赖

有人能帮我做一个国家/州下拉依赖关系的例子吗

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

下面是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>

---

}

首先，我认为您的JSON中有一个小错误，您应该在加拿大各州之前有一个“items”

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

完成此操作后，我将修改您的HTML，以获得两个不同的模型名称（就像您所做的那样，在第一次单击时覆盖国家列表）。然后，我将对ng repeat使用不同的语法，以便将值强制为StateGroupId

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

然后您可以使用此功能使用ng repeat显示它们

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

请选择一个状态
{{state.name}

---

我在这里修改了你的小提琴：，我希望这是你想要的行为：）

我建议你对你的数据模型进行一点重构——它看起来很复杂。让我们将县和州存储在两个阵列中：

$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
}];

有了这些，我们可以为数据编写s：

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

---

就这些

最简单的修复方法是在第二次选择中参考

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

---

有角度的乡村采摘器 凉亭安装有角采摘器（或） npm安装有角度的国家选择器

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

angular.module（'webApp'，['puigcerber.countryPicker']）；
angular.module（'myApp'，['puigcerber.countryPicker']））
.config（函数（pvpCountriesProvider）{
pvpCountriesProvider.setCountries([
{姓名：'阿布哈兹'，字母2：'阿布哈兹'}，
{名称：'科索沃'，字母2：'XK'}，
{名称：'纳戈尔诺-卡拉巴赫'，字母2：'NK'}，
{名称：'北塞浦路斯'，字母2：'KK'}，
{name:'索马里兰'，alpha2:'JS'}，
{名称：'南奥塞梯'，字母2：'西'}，
{名称：'德涅斯特河左岸'，字母2:PF'}
]);
});

您的答案很好，但是您更改了HTML，而我特别提到我希望保持当前HTML的原样并使用JavaScript。@脚本我在您的问题中看不到这一点。你提到了一些关于数据结构的东西，但这与HTML完全不同。你的回答对我非常有用。您已经向我介绍了JSON结构和HTML中的错误，这有助于我更好地理解错误以及如何修复错误，并最终使示例正常工作。你的例子比我的好，但为什么你用[ng repeat]而不是[ng options]？我很高兴它对你有所帮助。我使用的第一个ng repeat主要是强制每个项目的

值

属性，我发现这在测试时更容易修改，但是可以使用ng选项。第二个，我很懒，我复制/粘贴了ng的大部分内容，重复上面的3行；）。因此，简而言之，如果您愿意，您可以使用ng选项，它也可以工作：）如果将countryCode添加到州中，则使用筛选器要简单得多：ng options=“state.name for states in states | filter:{country:countryCode}”可能应该使用value.countryId==$scope.country.id作为其严格相等性。

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

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

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

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