16

假设我有一个 RESTful 端点，它接受一系列方面来查询数据。这里有几个例子：

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

我的模块接受查询对象来执行搜索：

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;
  });
}

这些方面正在以 Web 形式通过本地模型传递：

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

在getResults函数的成功回调中，我尝试将查询参数附加到 URL，如上面的示例所示：

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

如何在 AngularJS 中动态附加 URL 参数？

4

3 回答 3

39

使用 $location

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

对于非 AngularJS 应用程序：

您可以使用 history.js 将参数动态附加到 url。然后拆分网址以检索参数并传递给角度：

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

我建议将 history.js 作为 IE，直到 ver9 不支持历史对象推送状态，如果您要使用 IE10+ 或谷歌浏览器，请使用历史状态对象来更新 url。希望能帮助到你 ：）

于 2013-07-05T14:29:38.653 回答
1

对于上面的示例，您的 $location 的 path() 将是

'/search'

根是

'http://example.com'

回到他的问题，他没有要求用新路径更新位置，他要求用新的键值对查询动态更新位置！

所以要做到这一点，它只是日常的 jQuery $x(newX)！

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

或者

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

这都是 jQuery ！

如果他想将路径从搜索更改为其他内容，他可以这样做：

$location.path('/otherPath'); 
//his new location would be 'example.com/otherPath'
于 2016-08-19T14:45:15.100 回答
0

事实上，不是使用 $location 来调用您的数据服务端点，一种正常的方法是

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

并在 getDataService() 做一个

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

你的 serviceUrl 是

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

解析后（使用 sprintf）

于 2016-08-19T15:23:53.540 回答