Question

我的应用中有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"];

Answer 1

您可以将您的国家/地区设为countries.india等数组的键。在第二个选择中，您可以设置ng-options，以便从与countries的所选选项匹配的selectedCountry键重复首先选择框。就像印度被选中一样，会重复印度的关键印度＆＃39; countries数组

<强>演示

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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会更好

Answer 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-option选择值动态更新ng-option值？

3 个答案: