I am currently working on a page that showcases products fetched from a JSON REST web service. To enable filtering based on MinPrice and MaxPrice, I have implemented the use of query parameters on the page. However, I am facing an issue with getting multiple parameters to work seamlessly.
For instance:
Both MinPrice and MaxPrice are optional filters.
When I select MinPrice as 30, the generated URL looks like this:
#/minPriceParam=3
If I then proceed to select MaxPrice as 60, the expected URL should be:
#/minPriceParam=30&maxPriceParam=60
However, the actual result is:
#/maxPriceParam=60 indicating that the minPriceParam=30 part has been lost.
This is the simplified code snippet that I am using:
<a ui-sref="minPrice({ minPriceParam:30 })"> MinPrice 30</a>
<a ui-sref="maxPrice({ maxPriceParam:60 })"> MaxPrice 60</a>
In my 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; }
})
});