通过 URL 参数自动填充级联下拉选择值 - Angularjs

Question

我们有一个使用 AngularJS 的级联下拉列表的表单，我们希望做的是在页面加载时自动填充来自 URL 参数的两个下拉列表的选定值。

我们使用以下基本 Angularjs 级联下拉代码 https://jsfiddle.net/benct/pgrd1vrg/1/

我们想要做的是，如果 url 例如 www.example.com#country=印度&#State=拉贾斯坦邦

然后国家/地区下拉列表的值为 "India"，州下拉列表值为 "Rajasthan"

非常感谢任何建议

这是我们基于

级联下拉菜单的代码

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.

我们对URL结构没有严格的特殊要求，如果解决方案是基于下面的结构就好了

例如www.example.com#/India/Rajasthan/

Answer 1

为此我正在使用 angular 路由器。

阅读更多AngularJS Routing

由于对象在属性的键中具有值，我认为简单的过滤器是不可能的，所以我传递参数并循环属性并使用 if 条件，获取值关键字。参考我下面的代码。

JSFiddle Demo

测试用例：

在上面fiddle点击blogurl传参数的地方！

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

通过 URL 参数自动填充级联下拉选择值 - Angularjs

Autofill Cascading DropDown selected value via URL paramater - Angularjs

angularjs

dropdown

url-parameters

cascadingdropdown