Add or update current URL parameter using angular's $location

26 views
Skip to first unread message

Christy

unread,
Dec 9, 2016, 1:33:13 PM12/9/16
to Angular

I have a page with multiple parameters in my URL. I am trying to write a function to use on the click of an element. I want it to check if parameter pthree exists. If it does, update it to a new value (not duplicate it). If it does not exist, append it to my current URL and reload the page.

I am running into an issue when I try to update the current URL.

My current URL structure:

mypage?pone=99.9999999&ptwo=-44.4444444&pthree=1&pfour=1&pfive=1

Controller snippet:

$scope.test = function (){
   $location.search('pthree', 0);
}

This partially works. It updates my URL, but it adds #?pthree=0 to the end of my current URL.

The result I would like instead is:

mypage?pone=99.9999999&ptwo=-44.4444444&pthree=0&pfour=1&pfive=1

Any thoughts on what I could do to get my desired result? Thanks in advance!

Christy

unread,
Dec 9, 2016, 1:33:13 PM12/9/16
to Angular

Sander Elias

unread,
Dec 10, 2016, 6:46:23 AM12/10/16
to Angular
Hi Christy,

This is not easy done within angular itself. If you think it's worth the effort, you can create your own URL rendering function outside angular, and use that. It is possible, but a lot of work. All that, just to make the URL look better?

Regards
Sander

Christy

unread,
Dec 11, 2016, 4:43:26 PM12/11/16
to Angular
Hi Sander,

Thanks for your response. I need parameters because there is a filter on my page and the filtering options need to read the parameters and also be able to update/add parameters whether they exist or not. Are you aware of any resource for a js (non-angular) update parameter URL function or do you suggest I write it myself? It seems like this would be a common issue. What are your thoughts?


Thanks again! 
- Christy

Sander Elias

unread,
Dec 12, 2016, 12:19:40 AM12/12/16
to Angular
Hi Christy,

Given your response, I did a more thorough reread of your first question.  This is indeed a common use case, and it is supported out of the box.
You just need to set the html5 mode of your application. See this documentation page for more information. Pay attention to the html5 mode part!

Regards
Sander

Christy

unread,
Dec 12, 2016, 9:10:57 AM12/12/16
to Angular
Hi Sander,

Thanks! I set up the HTML5 mode and that has been pretty useful so far. I am running into an issue when I call $location.search({ pThree: '0' }). It is writing over all of my other parameters. For example, my URL structure was ?pOne=77.7777777&pTwo=-11.1111111&pThree=1&pFour=1&pFive=1&pSix=1 until I try to update the parameter pThree to 0. The URL structure then changes to ?pThree=0. I need all params to stay the same or simply update if I call $location.search(). Have you seen this before? 

Thanks again. 

- Christy

Sander Elias

unread,
Dec 12, 2016, 9:29:42 AM12/12/16
to Angular
Hi Christy,

Read all parameters, update what you want, and write all back. I'm sorry, but I don't have time now to test this issue.
If you create a plunk showcasing your issue, I can help you a lot quicker ;)

Regards
Sander

Christy

unread,
Dec 13, 2016, 8:28:32 AM12/13/16
to Angular
Hi Sander,

I implemented your suggestion and it is working great now. Thank you very much for your help. It is much appreciated! :)

- Christy
Reply all
Reply to author
Forward
0 new messages