如何使用另一個ng選項選擇值動態更新ng選項值？

我在我的應用程序中有2個選擇框。首先選擇選項框包含國家的名稱。我想更新第二個選擇框的值，相對於在第一個選擇框中選擇的值。如何使用另一個ng選項選擇值動態更新ng選項值？

例如，如果我選擇印度，那麼第二個選擇框的值應該包含印度的所有狀態。其他國家也一樣，但我無法這樣做。

代碼：

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

來源

2014-12-24 ng_developer

看來這個問題在這裏回答： http://stackoverflow.com/questions/16991960/using-jquery-how-do-i-filter-a-dropdown-field-based-on-value - 從這裏選擇 –

不，我想用角度來做，而不是用jquery。你的鏈接不太有用。 –

我的歉意，沒有看到你的標籤。 –

你應該使用的選擇NG-變化特性。

<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會更好

來源

2014-12-24 12:10:15 bahadir

謝謝你的回答。但我沒有正確地得到它。你能在這裏舉一個小提琴的例子嗎？ –

它不工作..你能解釋一下嗎..？ –

@ng_developer看到我的答案是有效的 –

你可以讓你的國家數組的鍵，如countries.india等在第二個選擇，你可以設置NG-選項與在第一個選擇框中選擇匹配的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>

來源

2014-12-24 12:21:18

這是行得通的。但是選擇框取2個空值。 –

2空值是什麼意思？ –

@ng_developer編輯看到現在:) –

我使用$觀看功能查看演示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]; 
    } 
    }); 
}

來源

2014-12-24 13:00:55 vamsikrishnamannem

你的答案不錯.. ..不同的東西.. –

謝謝@ng_developer，東西差異意味着你想要什麼類型 – vamsikrishnamannem

我的意思是你的答案是不同的方法。我喜歡它。謝謝 –

如何使用另一個ng選項選擇值動態更新ng選項值？

回答

相關問題