AngularJS Cascading Dropdown Object ng-option Error Detected

Question

AngularJS Cascading Dropdown Object ng-option Error Detected

I found a helpful example at this link: . It's working well, but I am encountering an issue where I get the object with an index number instead of the expected value.

Here is my controller:


/**
* @ngdoc object
* @name test.Controllers.TestController
* @description TestController
* @requires ng.$scope
*/

angular
.module('test')
.controller('TestController', [
    '$scope',
    function($scope) {
        $scope.countries = {
            'India': {
                'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
                'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
                'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
            },
            'USA': {
                'Alabama': ['Montgomery', 'Birmingham'],
                'California': ['Sacramento', 'Fremont'],
                'Illinois': ['Springfield', 'Chicago']
            },
            'Australia': {
                'New South Wales': ['Sydney'],
                'Victoria': ['Melbourne']
            }
        };
        $scope.GetSelectedCountry = function () {
            $scope.strCountry = document.getElementById("country").value;
            var datas =$scope.strCountry;
            console.log(JSON.stringify(datas));
        };
        $scope.GetSelectedState = function () {
            $scope.strState = document.getElementById("state").value;
        };



    }
]);

On my view page:

Country: Select States:Select City: Select {{city}} Selected Country: {{strCountry}} Selected State: {{strState}} Selected City: {{city}}

javascript angularjs

Answer 1

Answer №1

If you're looking to retrieve the chosen country and state, you can loop through the object to find the key that corresponds to the ng-model value. For obtaining the city, simply return the value of ng-model.

angular.module('test', [])
  .controller('TestController', ['$scope',
      function($scope) {
        $scope.countries = {
          'India': {
            'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
            'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
            'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
          },
          'USA': {
            'Alabama': ['Montgomery', 'Birmingham'],
            'California': ['Sacramento', 'Fremont'],
            'Illinois': ['Springfield', 'Chicago']
          },
          'Australia': {
            'New South Wales': ['Sydney'],
            'Victoria': ['Melbourne']
          }
        };

        $scope.getCountry = function(val) {
          for (var key in $scope.countries) {
            if ($scope.countries.hasOwnProperty(key)) {
              if ($scope.countries[key] === val) {
                alert('You chose: ' + key);
              }
            }
          }
        };
        
        $scope.getCity = function(city, state) {
          for (var key in state) {
            if (state.hasOwnProperty(key)) {
              if (state[key] === city) {
                alert('You selected: ' + key);
              }
            }
          }
        };

        $scope.alertCity = function(city) {
          alert('You picked ' + city);
        };
  }]);

<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>

<div ng-app="test">
  <div ng-controller="TestController">
    <div>
      Country:
      <select id="country" ng-model="states" ng-options="country for (country, states) in countries" ng-change="getCountry(states)">
        <option value=''>Select</option>
      </select>
    </div>
    <div>
      States:
      <select id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states" ng-change="getCity(cities, states)">
        <option value=''>Select</option>
      </select>
    </div>
    <div>
      City:
      <select id="city" ng-disabled="!cities || !states" ng-model="city" ng-change="alertCity(city)">
        <option value=''>Select</option>
        <option ng-repeat="city in cities" value="{{city}}">{{city}}</option>
      </select>
    </div>
  </div>
</div>

Answer 2

If you're looking to retrieve the chosen country and state, you can loop through the object to find the key that corresponds to the ng-model value. For obtaining the city, simply return the value of ng-model.

angular.module('test', [])
  .controller('TestController', ['$scope',
      function($scope) {
        $scope.countries = {
          'India': {
            'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'],
            'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'],
            'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur']
          },
          'USA': {
            'Alabama': ['Montgomery', 'Birmingham'],
            'California': ['Sacramento', 'Fremont'],
            'Illinois': ['Springfield', 'Chicago']
          },
          'Australia': {
            'New South Wales': ['Sydney'],
            'Victoria': ['Melbourne']
          }
        };

        $scope.getCountry = function(val) {
          for (var key in $scope.countries) {
            if ($scope.countries.hasOwnProperty(key)) {
              if ($scope.countries[key] === val) {
                alert('You chose: ' + key);
              }
            }
          }
        };
        
        $scope.getCity = function(city, state) {
          for (var key in state) {
            if (state.hasOwnProperty(key)) {
              if (state[key] === city) {
                alert('You selected: ' + key);
              }
            }
          }
        };

        $scope.alertCity = function(city) {
          alert('You picked ' + city);
        };
  }]);

<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>

<div ng-app="test">
  <div ng-controller="TestController">
    <div>
      Country:
      <select id="country" ng-model="states" ng-options="country for (country, states) in countries" ng-change="getCountry(states)">
        <option value=''>Select</option>
      </select>
    </div>
    <div>
      States:
      <select id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states" ng-change="getCity(cities, states)">
        <option value=''>Select</option>
      </select>
    </div>
    <div>
      City:
      <select id="city" ng-disabled="!cities || !states" ng-model="city" ng-change="alertCity(city)">
        <option value=''>Select</option>
        <option ng-repeat="city in cities" value="{{city}}">{{city}}</option>
      </select>
    </div>
  </div>
</div>

AngularJS Cascading Dropdown Object ng-option Error Detected

Answer №1

Similar questions

Challenges with downloading a file synchronously using NodeJS

Guide on aligning a popup next to the button that activated it using CSS and JavaScript

After ajax, trigger change event

Angular 5 Auto Complete Feature

Encountered an error with a JSON object in node and express: Unexpected colon token

Searching for data in Node.js using Mongoose and dates

Is there a way to prevent redirection to the homepage after submitting a login form?

Exploring the 3D Carousel Effect with jQuery

Using Array Data Format to Customize Color in Highcharts Funnel Chart

Unable to load CSS and JS files on JSP servlet mapping

Failure to achieve closure - even after thorough study of the concept

Angular 13.0 version is experiencing issues when trying to run the "ng serve" command

Complicated aspects of React and Angular deployment

What is the best way to create a PHP array using JSON?

"How can we pause the setInterval when the user hovers over the Ajax Quick Cart and resume it once

formula for an arbitrary velocity vector

Change the text to uppercase format

Transfer individual values from one array to another in a deconstructed manner

Sending Python Object from Django View to Javascript Script in Template

Best practices for Django project implementation using only pure JavaScript, HTML, and template tags