How to use Angular $location to set my new url location by changing its key-value params dynamically?

Question

Let's say I have a RESTful endpoint that accepts a range of facets to query data. Here's a few examples:

example.com/search?type=Doctor&location=Boston,MA&radius=2  
example.com/search?type=Facility&location=Wayne,NJ&radius=3&gender=f  
example.com/search?type=Doctor&location=Patterson,NJ

My module accepts the query object to perform the search:

console.log(query);
{
  type:'Doctor',
  location:'Boston,MA',
  radius:'2'
}

$scope.getSearch = function(query){
  var search = $search.search(query);
  search.getResults(function(results){
    $scope.results = results;
  });
}

These facets are being passed through a local model in a web form:

 <input type="text" ng-model="query.location"/>
 <input type="text" ng-model="query.radius"/>
 <button type="button" ng-click="getSearch(query)">Search</button>

In the success callback of the getResults function, I'm trying to append the query parameters to the URL like in the examples above:

$scope.getSearch = function(query){
  var search = $search.search(query);
  search.getResults(function(results){
    $scope.results = results;
    search.appendQueryToURL(query);
  });
}

How do I append URL parameters dynamically in AngularJS?

are you looking for $location.search()?

Khanh TO
– Khanh TO

2013-07-05 14:52:43 +00:00
Commented Jul 5, 2013 at 14:52 — Khanh TO
– Khanh TO, Commented Jul 5, 2013 at 14:52
@KhanhTO Holy... yes. It even accepts key value pairs.

Dan Kanze
– Dan Kanze

2013-07-05 14:56:31 +00:00
Commented Jul 5, 2013 at 14:56 — Dan Kanze
– Dan Kanze, Commented Jul 5, 2013 at 14:56

Dan Crews · Accepted Answer · 2014-04-21 19:52:21Z

39

Using $location

$location.path('/newValue').search({key: value});

For Non AngularJS applications:

You can use history.js to append parameters dynamically to the url. then split the url to retrieve the params and pass to angular:

History.replaceState({state:1}, "State 1", "?Param1=something");

I am suggesting history.js as IE until ver9 didnt support history object push state, if you are going to use IE10+ or google chrome, use the history state object to update the url. Hope it helps :)

edited Apr 21, 2014 at 19:52

Dan Crews

4,25523 silver badges25 bronze badges

answered Jul 5, 2013 at 14:29

neoeahit

1,7992 gold badges22 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dan Kanze Over a year ago

There's really no native AngularJS method that does this for you already?

neoeahit Over a year ago

docs.angularjs.org/guide/dev_guide.services.$location reflecting this in my answer . Please upvote if this is what you are looking for

neoeahit Over a year ago

Havent used it alot but please follow this, this might give you a better idea: stackoverflow.com/questions/14174394/…

ThorSummoner Over a year ago

A nice interface for touching the url; I was a bit disappointed that it requires a hash (possibly only if the url ends with a /), but what can ya do.

Kunal Over a year ago

Chaining the path and search this way will cause the existing parameters to be replaced. The op's question is to append. Hence, append the parameter using $location.search(key, paramValue) and then call $location.path(yourPath).

Jenna Leaf · Accepted Answer · 2016-08-19 18:15:57Z

1

For the example above, the path() of your $location would be

'/search'

and the root is

'http://example.com'

Going back to his question, he did not ask to update the location with new path, he asked to update the location with new key-value pairs query dynamically!

So to do that, it's just everyday jQuery $x(newX)!

$location.search({type: x, location: y, radius: z});

or

$location.search({type: x, location: y});

It's all jQuery !!

If he wants to change the path from search to something else, he can do:

$location.path('/otherPath'); 
//his new location would be 'example.com/otherPath'

edited Aug 19, 2016 at 18:15

answered Aug 19, 2016 at 14:45

Jenna Leaf

2,51026 silver badges31 bronze badges

Comments

Jenna Leaf · Accepted Answer · 2016-08-23 13:47:04Z

0

In fact, instead of using $location to call your data-service endpoint, a normal way to do that is

<form id='searchForm' ng-submit="getDataService()" ng-controller="aController">
<input ng-model="type"/>
<input ng-model="location"/>
<input ng-model="radius"/>
<input ng-model="gender"/>
<button type='submit'/>
</form>

and in getDataService() do a

$http.get( serviceUrl, config ).success( ...

with your serviceUrl being

example.com/search/Facility/Wayne,NJ/3/f

after parsing (using sprintf)

edited Aug 23, 2016 at 13:47

answered Aug 19, 2016 at 15:23

Jenna Leaf

2,51026 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to use Angular $location to set my new url location by changing its key-value params dynamically?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related