Dan Kanze Dan Kanze - 3 months ago 23
AngularJS Question

append URL parameters dynamically AngularJS

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?

Answer

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

Comments