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

Seems this questions was answered here: http://stackoverflow.com/questions/16991960/using-jquery-how-do-i-filter-a-dropdown-field-based-on-value-selected-from-anoth — Jeroen de Lau, Dec 24 '14 at 12:09
No. I want to do it with angular, not with jquery. Your link is not so useful. — ng_developer, Dec 24 '14 at 12:15

score 4 · Answer 1 · edited Jun 28 '15 at 14:54

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>

surely.. I am waiting for some more answers. I will do it in some time. Thank you.. — ng_developer, Dec 24 '14 at 13:17

bahadir · Answer 2 · 2014-12-24T12:48:39.940

2

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

edited Dec 24 '14 at 12:48

answered Dec 24 '14 at 12:10

bahadir

709
1
11
28

Thank you for answer. But i didn't get it properly. Can you give a fiddle example here. – ng_developer Dec 24 '14 at 12:16
Ya.. I am following your answer. – ng_developer Dec 24 '14 at 12:40
can you up-vote my question so that I can do the same with accepted answer. – ng_developer Dec 24 '14 at 13:01

score 0 · Answer 3 · answered Dec 24 '14 at 13:00

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

Thanks @ng_developer, something difference means what type you want — vamsikrishnamannem, Dec 24 '14 at 13:13
I mean your answer is different in approach. I liked it.. Thank You — ng_developer, Dec 24 '14 at 13:15

How to update ng-option value dynamically with another ng-option selected value?

3 Answers3