77

如何在 Angularjs 中使用查询参数构建 url。

我看到了 API $location.search()

问题是 $location(url) 是重定向到 url。就我而言，我想为查询参数传递一个 url 和 key:value 对并构建 url。就像是

网址：/a/b/c 参数：{field1: value1, field2: value2}

结果：/a/b/c?field1=value1&field2=value2

我喜欢将此网址用于链接。我还看到了 angular encode ?，&字符。我可以避免这种情况吗？

编辑：

我的意图是使用 url 作为锚元素的 href。我确实使用 $http 发送请求，但有时我需要提供带有查询参数的链接（基于当前对象）

谢谢

4

4 回答 4

125

从 1.4+ 开始就有一个不错的解决方案。您可以使用以下参数从参数对象构建查询字符串$httpParamSerializer：

var qs = $httpParamSerializer(params);

在此处查看文档

默认的 $http 参数序列化程序，根据以下规则将对象转换为字符串：

{'foo': 'bar'} results in foo=bar
{'foo': Date.now()} results in foo=2015-04-01T09%3A50%3A49.262Z (toISOString() and encoded representation of a Date object)
{'foo': ['bar', 'baz']} results in foo=bar&foo=baz (repeated key for each array element)
{'foo': {'bar':'baz'}} results in foo=%7B%22bar%22%3A%22baz%22%7D" (stringified and encoded representation of an object)
Note that serializer will sort the request parameters alphabetically.
于 2015-12-02T09:38:43.487 回答
14

Angular 在buildUrl()内部使用该函数从参数对象生成查询字符串。现在不可能在你的代码中使用它，因为它是私有的，$HttpProvider除非你想做一些eval()魔法。

github上的相关问题：

于 2014-02-10T10:57:21.730 回答
3

相信你真的是在叫错树......你需要看看 $http 服务，它给你 $http.get(url, config) 或 $http.post(url, data, config)。对于带有参数的 GET 请求，请参见以下 SO

$http 获取参数不起作用

有关 $http 及其工作原理的信息，请参阅 Angular 文档。

http://docs.angularjs.org/api/ng.$http

也许我误解了目标，而您实际上想导航到不同的地方，我在这里建议的只是在后台发出请求（AJAX 风格）。

http://jsfiddle.net/4ZcUW/

JS

angular.module("myApp", []).controller("MyCtrl", ["$scope", "$window", function($scope, $window) {
    $scope.goPlaces = function(url, parameter) {
        $window.open("http://www."+url+"?q="+parameter);
        //$window.open("http://www."+url+"?q="+parameter, "_self");
        //$window.open("http://www."+url+"?q="+parameter, "_top");
    };
}])

的HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <a href="#" ng-click="goPlaces('google.com','Shaun Husain')">Find me</a>
</div>

这对你的情况有用吗？

于 2013-09-06T20:20:08.900 回答
0

angular 的内部和外部 URL 格式化规则略有不同。

$location 是一种在您自己的应用程序中激活内部路由的方法。

如果它是一个外部链接，那么 $http 就是你想要的。

如果它是一个内部链接，那么检查它可能值得检查哈希/爆炸语法。

于 2013-09-06T20:27:18.953 回答