Question

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

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

我们希望做的是如果网址是例如 www.example.com＃国家=印度＆安培;＃国家=拉贾斯坦邦

然后，国家醉酒的价值为“印度”，州下拉值为“拉贾斯坦邦”

非常感谢任何建议

这是我们基于

级联下拉列表的代码

getContactNameSurname()

P.S。

如果解决方案基于以下结构，那么我们对URL结构没有严格的特殊要求

e.g。 www.example.com＃/印度/拉贾斯坦邦/

Answer 1

我正在使用角度路由器。

了解更多AngularJS Routing

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

JSFiddle Demo

<强>测试用例：

在上面的小提琴中点击参数传递的blog网址！

<强> 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参数自动填充Cascading DropDown选定值 - Angularjs

1 个答案: