Angular JS（UI-Router）的多个可选参数

Question

我有一个显示来自 JSON REST Web 服务的产品的页面。不确定这是否是最好的方法，但我正在尝试使用页面上的查询参数来根据 MinPrice 和 MaxPrice 进行过滤（稍后也会添加其他过滤器） - 但是，我无法获得多个参数工作。

例如：

MinPrice 和 MaxPrice 都是可选的。

当我点击 MinPrice 30 时，我得到以下 URL，这很好：

#/minPriceParam=3

如果我然后单击 MaxPrice 60，我希望

#/minPriceParam=30&maxPriceParam=60

然而我真正得到的是

#/maxPriceParam=60 即它丢失了 minPriceParam=30 部分。

这是我的简化代码

<a ui-sref="minPrice({ minPriceParam:30 })">   MinPrice 30</a>
<a ui-sref="maxPrice({ maxPriceParam:60 })">   MaxPrice 60</a>

JS 文件

app.config(function ($stateProvider, $urlRouterProvider) {

$stateProvider

      .state('minPrice', {
        url: '/?minPriceParam&maxPriceParam'

        , controller: function ($scope, $StateParams) 
         {$scope.minimumPrice = $StateParams.min;}
    })

        .state('maxPrice', {
        url: '/?minPriceParam&maxPriceParam'

        , controller: function ($scope, $StateParams) { $scope.maximumPrice = $StateParams.max; }
    })



});

Answer 1

基于this 示例，我认为您可以将默认参数放在params 部分中：

<a ui-sref="eitherPrice()">   MinPrice 30</a>
<a ui-sref="eitherPrice()">   MaxPrice 60</a>

app.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('eitherPrice', {
            params {
                minPriceParam:30,
                maxPriceParam:60
            }            
            , url: '/?minPriceParam&maxPriceParam'

            , controller: function ($scope, $StateParams) {
              $scope.minimumPrice = $StateParams.minPriceParam;
              $scope.maximumPrice = $StateParams.maxPriceParam;
             }
        })

});

Answer 2

您的代码中有一些错误： 首先，您的状态参数名称分别为 minPriceParam 和 maxPriceParam。您无法使用名称 min 和 max 访问它们。 此外，当您调用 maxPrice 状态时，您必须同时发送 minPriceParam 和 maxPriceParam。请参考以下代码。

app.config(function ($stateProvider, $urlRouterProvider) {

$stateProvider
  .state('minPrice', {
    url: '/?minPriceParam&maxPriceParam'
    , controller: function ($scope, $stateParams) 
     {$scope.minimumPrice = $stateParams.minPriceParam;}
})
    .state('maxPrice', {
    url: '/?minPriceParam&maxPriceParam', 
    controller: function ($scope, $stateParams)
    { $scope.minimumPrice = $stateParams.minPriceParam;
      $scope.maximumPrice = $stateParams.maxPriceParam; }
})
});

在您的 html 中，您必须在调用 maxPrice 状态时将最低价格作为状态参数发送。

<a ui-sref="minPrice({ minPriceParam:30 })">   MinPrice 30</a>
<a ui-sref="maxPrice({ minPriceParam:minimumPrice,maxPriceParam:60 })"> MaxPrice 60</a>