映射下拉列表选择到URL

Mapping dropdown selects to URL

本文关键字：URL 选择 下拉列表 映射      更新时间：2023-09-26

我是Angular的新手，无法将下拉选择映射到浏览器URL（基于下拉选择的动态）。

例如，浏览器URL为"/home？color=Red&&size=Large"。当我将此URL粘贴到新的选项卡中时，我希望颜色和大小下拉列表已经选择为"红色"answers"大"。我该怎么做？

我的AngularJS控制器代码：

$scope.getResults = function() {
    server.getResults($scope.myColor, $scope.mySize)
    .success(function(data) {
        results = data;
        $scope.myColor = $location.search('color', $scope.myColor);
        $scope.mySize = $location.search('size', $scope.mySize);
    });
};

AngularJS服务用于上述功能：

app.factory('server', ['$http', function($http){
    return { 
        getResults : function(color, size) {
            var req = {};
            req.color = color;
            req.size = size;
            return $http({
                method: 'GET', 
                url: 'results',
                params : req
            });
        }
    }
}]);

Angular中的ui路由器：

$stateProvider.state('home', {
    url: '/home',
    templateUrl: '/home.html',
    controller: 'MainCtrl',
    reloadOnSearch: false
})

检查此解决方案

Angular中的ui路由器：

 $stateProvider.state('home', {
        url: '/home/:color/:size',
        templateUrl: '/home.html',
        controller: 'MainCtrl',
        reloadOnSearch: false
    })
    myApp.controller('MainCtrl', function($scope, $stateParams)
   {  
        $scope.color=$stateParams.color;
         $scope.size=$stateParams.size;
   });

查看

var params= { size:'24', color:red };
$state.go('home', params);
相关文章：