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

Let's say I have a RESTful endpoint that accepts a range of facets to query data. Here's a few examples:,MA&radius=2,NJ&radius=3&gender=f,NJ

My module accepts the query object to perform the search:


$scope.getSearch = function(query){
  var search = $;
    $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 = $;
    $scope.results = results;

How do I append URL parameters dynamically in AngularJS?


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 :)

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


and the root is


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)!

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


${type: x, location: y}); 

It's all jQuery !!

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

//his new location would be '' 

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'/>

and in getDataService() do a

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

with your serviceUrl being,NJ/3/f

after parsing (using sprintf)

Need Your Help

Tomcat 6 JAVA_HOME

java tomcat batch-file tomcat6

I try to set the JAVA_HOME path as my Tomcat server is looking for it. I am trying to set it but it doesn't seem to work and causes an error when I do. I am trying to set the JAVA in the setclasspa...