Autofill Cascading DropDown selected value via URL paramater - Angularjs

Question

We have a form with cascading drop downs using AngularJS, what we wish to do is auto fill the selected values for two drop downs from URL parameters, on page load.

We are using the following basic Angularjs code for the cascading drop downs https://jsfiddle.net/benct/pgrd1vrg/1/

What we wish to do is if the url is e.g. www.example.com#country=India&#State=Rajasthan

Then the country drodown has the value of "India" and the state dropdown value is "Rajasthan"

Any suggestion be greatly appreciated

This is the code we've based the cascading dropdowns on

var myApp = angular.module('myApp',[]);
myApp.controller('CountryCntrl',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']
                }
            };


        });

P.s.

We have no strict particular requirements for the URL structure, if the solution was based on the following structure that would be fine

e.g. www.example.com#/India/Rajasthan/

Answer 1

I am using angular router for this.

Read more AngularJS Routing

Since the object is having the values in the key of the property, simple filter is not possible I think, so I pass the parameter and loop the properties and using a if condition, get the value with the keyword. Refer my below code.

JSFiddle Demo

Testcase:

in the above fiddle click the blog url where the parameters are passed!

JS:

var routingExample = angular.module('Example.Routing', []);
routingExample.controller('HomeController', function($scope) {

});
routingExample.controller('BlogController', function($scope, $routeParams) {
  $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']
    }
  };
  for (var key in $scope.countries) {
    if (key === $routeParams.country) {
      $scope.states = $scope.countries[key];
    }
  }
  for (var key in $scope.states) {
    if (key === $routeParams.state) {
      $scope.cities = $scope.states[key];
    }
  }
});

routingExample.config(function($routeProvider) {
  $routeProvider.
  when('/home', {
    templateUrl: 'home.html',
    controller: 'HomeController'
  }).
  when('/blog/:country/:state', {
    templateUrl: 'blog.html',
    controller: 'BlogController'
  }).
  otherwise({
    redirectTo: '/home'
  });
});