Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have a page which displays products from a JSON REST web service. Not sure if this is the best way, but I am trying to use query parameters on the page to be able to filter based on MinPrice and MaxPrice (other filters would be added later as well) - however, i can't get multiple parameters working.

for example:

MinPrice and MaxPrice are both optional.

When I click MinPrice 30, i get the following URL, which is fine:

#/minPriceParam=3

If i then click MaxPrice 60, I would expect

#/minPriceParam=30&maxPriceParam=60

however what i actually get is

#/maxPriceParam=60 i.e. it's lost the minPriceParam=30 part.

this is the simplified code that i have

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

JS File

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; }
    })



});
share|improve this question

2 Answers 2

There are a few errors in your code: Firstly your state parameters names are minPriceParam and maxPriceParam respectively. You cannot access them with name min and max. Further you have to send both the minPriceParam and maxPriceParam when you are calling the maxPrice state. Please refer to the following code.

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; }
})
});

In your html, you have to send the minimum price as a stateparameter when you are calling the maxPrice state.

<a ui-sref="minPrice({ minPriceParam:30 })">   MinPrice 30</a>
<a ui-sref="maxPrice({ minPriceParam:minimumPrice,maxPriceParam:60 })"> MaxPrice 60</a>
share|improve this answer
    
Hi - no that didn't seem to work.. I'm not sure that $scope.minimumPrice is getting to the controller because when I add {{ minimumPrice }} it shows nothing.. –  Steve yesterday
    
Do i need to explicitly state the controller name somewhere in the state section? –  Steve yesterday
    
Yes do need to do that, Do you create different templates for minPrice and maxPrice states? –  Himanshu yesterday
    
Templates would be the same, added the Controller into .state but query parameters still not getting picked up in the controller –  Steve yesterday

Based on this example, I think you can just put your default parameters in a params section:

<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;
             }
        })

});
share|improve this answer
    
This doesn't seem to work either.. your link was the example that i originally followed not sure why its not working though. –  Steve yesterday

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.