通过 URL 参数自动填充级联下拉选择值 - Angularjs
Autofill Cascading DropDown selected value via URL paramater - Angularjs
我们有一个使用 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/
为此我正在使用 angular 路由器。
由于对象在 属性 的键中具有值,我认为简单的过滤器是不可能的,所以我传递参数并循环属性并使用 if 条件,获取值关键字。参考我下面的代码。
测试用例:
在上面fiddle点击blog
url传参数的地方!
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'
});
});
我们有一个使用 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/
为此我正在使用 angular 路由器。
由于对象在 属性 的键中具有值,我认为简单的过滤器是不可能的,所以我传递参数并循环属性并使用 if 条件,获取值关键字。参考我下面的代码。
测试用例:
在上面fiddle点击blog
url传参数的地方!
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'
});
});