How to update ng-option value dynamically with another ng-option selected value?
Question
I have 2 select option box in my app. First select option box contains the name of Countries. I want to update second select option box value with respect to value selected in first select box.
For example, If I select India, than second select box value should contain all states of India. Similar for other countries also but I am not able to do so.
Code:
<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"];
3 answers
solution1
4 2014-12-24 12:21:18
You can make your countries the keys of an array like countries.india etc In second Select you can set ng-options to repeat from the countries key that matches selected option of selectedCountry in first select box. like if India is selected that will repeat through key 'india' of countries array
Demo
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>
solution2
2 2014-12-24 12:10:15
you should use ng-change property of select.
<select ng-change="changeStates()">...</select>
$scope.changeStates = function(){
$scope['currentStates'] = $scope[$scope.selectedCountry];
};
<select ng-options="state as state for state in currentStates">...</select>
but in my humble opinion you should better use id values
Edit: and you shouldn't inject States into scope directly. scope.States.America will be better
solution3
0 2014-12-24 13:00:55
I use the $watch function see the demo 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];
}
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.