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

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-选项从重复countries是选择相匹配的选项键selectedCountry在第一个选择框。 就像印度被选中一样，将重复通过关键的'印度' 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>

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函数看看演示点击这里

 <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 个解决方案

解决方案1
4 2014-12-24 12:21:18

解决方案2
2 2014-12-24 12:10:15

解决方案3
0 2014-12-24 13:00:55

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

问题描述

3 个解决方案

解决方案1 4 2014-12-24 12:21:18

解决方案2 2 2014-12-24 12:10:15

解决方案3 0 2014-12-24 13:00:55

解决方案1
4 2014-12-24 12:21:18

解决方案2
2 2014-12-24 12:10:15

解决方案3
0 2014-12-24 13:00:55