如何使用另一个 ng-option 选定值动态更新 ng-option 值？答案

【问题标题】：How to update ng-option value dynamically with another ng-option selected value?如何使用另一个 ng-option 选定值动态更新 ng-option 值？
【发布时间】：2014-12-24 11:48:46
【问题描述】：

我的应用中有 2 个选择选项框。首先选择选项框包含国家名称。我想根据在第一个选择框中选择的值更新第二个选择选项框的值。

例如，如果我选择印度，那么第二个选择框的值应该包含印度的所有州。其他国家也类似，但我不能这样做。

代码：

<select ng-model="selectedCountry" ng-options="item as item for item in country">
    <option ng-if="!selectedCountry" value="">Select Country</option>
</select>
<pre>selectedItem: {{selectedItem | json}}</pre>

<select ng-model="selectedState" ng-options="{{selectedState}}">
    <option ng-if="!selectedState" value="">Select state</option>
</select>
<pre>selectedItem: {{selectedState | json}}</pre>

JS：

$scope.country = [
         "India",
         "America",
        "Nepal",
         "China"
    ];
  $scope.India = ["Bihar"];
    $scope.America = ["Arizona"];
    $scope.China = ["Beging"];
    $scope.Nepal = ["Dhankuta"];

【问题讨论】：

似乎这个问题在这里得到了回答：stackoverflow.com/questions/16991960/…
没有。我想用 Angular 来做，而不是用 jquery。您的链接不是那么有用。
抱歉，没有看到你的标签。

标签： javascript angularjs html

【解决方案1】：

您可以使您的国家/地区成为数组的键，例如 countries.india 等。在第二个选择中，您可以设置 ng-options 以从匹配第一个选择框中 selectedCountry 的选定选项的 countries 键重复。就像如果选择了印度，它将通过 countries 数组的键“印度”重复

演示

angular.module('test', [])
.controller('testController', function($scope) {
    $scope.country = [
        "India",
        "America",
        "Nepal",
        "China"
    ];
    $scope.countries = [];
    $scope.countries.India = ["Bihar", "mumbai"];
    $scope.countries.America = ["Arizona"];
    $scope.countries.China = ["Beging"];
    $scope.countries.Nepal = ["Dhankuta"];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testController">
  <select ng-model="selectedCountry" ng-options="item as item for item in country">
      <option ng-if="!selectedCountry" value="">Select Country</option>
  </select>
  <pre>selectedItem: {{selectedCountry}}</pre>

  <select ng-model="selectedState" ng-options="items for items in countries[selectedCountry]">
      <option ng-if="!selectedCountry" value="">Select Country</option>
  </select>
  <pre>selectedItem: {{selectedState }}</pre>
</div>

【讨论】：

这是有效的。但选择框取 2 个空值。
谢谢你.. 反正我也做了同样的改变。
当然.. 我正在等待更多答案。我会在一段时间内完成。谢谢你..

【解决方案2】：

你应该使用 select 的 ng-change 属性。

<select ng-change="changeStates()">...</select>

$scope.changeStates = function(){
    $scope['currentStates'] = $scope[$scope.selectedCountry];
};

<select ng-options="state as state for state in currentStates">...</select>

但以我的拙见，您应该更好地使用 id 值

编辑：你不应该直接将状态注入作用域。 scope.States.America 会更好

【讨论】：

感谢您的回答。但我没有正确理解。你能在这里举一个小提琴的例子吗？
是的。我正在关注你的回答。
您能否对我的问题进行投票，以便我可以对接受的答案做同样的事情。

【解决方案3】：

我使用 $watch 功能看演示click here

 <body ng-app ng-controller="AppCtrl"> <select ng-model="selectedCountry" ng-options="item as item for item in country">
        <option value="">Select Country</option> </select> <pre>selectedItem: {{selectedCountry | json}}</pre>

    <select ng-model="selectedState" ng-options="item as item for item in state">
        <option ng-if="!selectedState" value="">Select state</option> </select> <pre>selectedItem: {{selectedState | json}}</pre> </body>

javascript：

function AppCtrl($scope) {

$scope.country = ["India", "America", "Nepal","China" ];
var state = {India :["Bihar"],America :["Arizona"],China:["Beging"],Nepal:["Dhankuta"]};
    $scope.$watch('selectedCountry', function(newValue, oldValue) {
      if ( newValue) {
      $scope.state = state[$scope.selectedCountry];
    }
  });
}

【讨论】：

谢谢@ng_developer，有些不同意味着你想要什么类型
我的意思是您的答案在方法上有所不同。我喜欢它..谢谢你