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

Question

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

I have 2 options in my application. The first checkbox has the name of the Country. I want to update the value of the second value of the selection option with respect to the value selected in the first selection field.

For example, if I select India, then the second value of the selection field should contain all the states of India. Similarly for other countries, but I am not able to do this.

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

+4

javascript angularjs html5

ng_developer Dec 24 '14 at 11:48

source share

3 answers

A.B · Answer 1 · 2014-12-24T12:21:18+0000

countries.india .. , ng- countries, selectedCountry . , , "india" countries

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>

Hide result

bahadir · Answer 2 · 2014-12-24T12:10:15+0000

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

vamsikrishnamannem · Answer 3 · 2014-12-24T13:00:55+0000

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

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

More articles: