In Angularjs app, i have a url like
http://url.com/my_app/#/store/items.
Now i want to append query string for example,
http://url.com/my_app/#/store/items?page=2.
but in url, javascript encodes the "?" to "%3F" which i don't want. It should remain "?" only in the url as angularjs $location.search() returns nothing for "%3F".
How it can be done ?
5 Answers
There is not enough details in your question so I will assume that you are using AngularJS routing - or at least the $location service - in non-HTML5 mode. If so, the part after the # character represents your URL from the single-page-application point of view (more about AngularJS here).
If the above assumptions are correct it means that you shouldn't try to add or manipulate the question mark "by hand". Instead you should change the search part of the $location to manipulate query string (part after ?) and the question mark will be added / removed to the final URL as needed.
In your case you could write:
$location.path('/store/items').search('page', 2)
This is assuming that you are manipulating URLs from JavaScript, as stated in your question.
answered Mar 4, 2013 at 16:23
pkozlowski.opensource
117k60 gold badges329 silver badges286 bronze badges
4 Comments
Andresch Serj
very nice answer! works very well for me and it a lot cleaner than what i did simply because i did not RTFM :D
Mark
Definitely the correct answer. Kind of sucks though if you have a prebuilt URL from somewhere else in the app that you now have to parse into 3 values. Ugh... that's angular poop. Owch!
toxaq
@Mark if you don't want to split the URL, see my answer.
Manaday Mavani
Very neat answer! Though simple, would like to mention that you can pass multiple search parameters using object syntax also.However, in that case angular will replace full search object with the provided object.
If you are using the $location service then use $location.url('/store/items?page=2') instead. This has been a setter method from at least 1.0.7 and works a treat in my 1.1.5 app.
1 Comment
Vakey
Def the best answer if all you have is the url string.
you can create a parameter object like:
var param = {
page: 2
}
$location.url("/store/items").search(param)
Comments
If you're using the ui-router which is highly recommended, you could use $state.go(to, params, options) as described here.
As prerequisite you need to define your state properly, that means every possible query parameter must be made known to the ui-router. See the following example (page and otherParam):
$stateProvider.
state('storeItems', {
url: '/store/items?page&otherParam',
templateUrl: '/modules/store/views/item.client.view.html'
});
And then you can just switch locations for instance from a controller by calling
$scope.gotoItemsPage = function(page) {
$state.go('storeItems', {
page: page,
otherParam: 'Just a show off'
});
};
No fiddling with the encoding needed and highly readable!
Comments
You can use decodeURIComponent.
For example:
decodeURIComponent('http://url.com/my_app/#/store/items%3Fpage=2');
// will give you `http://url.com/my_app/#/store/items?page=2`
2 Comments
Knörpeltäng
Do not fiddle with the URL for yourself! In the angular context there are far better ways than that. See the answer of @pkozlowski.opensource or even better use $state.go(to, params, options) where params is an object containing your query params defined in your state and their values unencoded.
MathieuAuclair
Solved my problem with the returnUrl get param in dotnet core, not related to the question, but thanks for the idea!
http://url.com/my_app/#/store/items/page/2instead ofhttp://url.com/my_app/#/store/items?page=2. As it may be more correct to have/pattern instead of?pattern after the#$location.search('page',2)to set the query? Or working with routeparams?