Question

我有一个显示JSON REST Web服务产品的页面。不确定这是否是最佳方式，但我试图在页面上使用查询参数，以便能够基于MinPrice和MaxPrice进行过滤（其他过滤器也将在以后添加） - 但是，我无法获得多个参数工作。

例如：

MinPrice和MaxPrice都是可选的。

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

＃/ 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>

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

2 个答案: