web-dev-qa-db-ja.com

パラメーターオブジェクトからクエリ文字列を作成する

Angularjsでクエリパラメータを使用してURLを作成する方法。

APIが表示されます $ location.search（）

問題は、$ location（url）がURLにリダイレクトすることです。私の場合、クエリパラメータのurlとkey：valueのペアを渡し、URLを作成します。何かのようなもの

url：/a/b/c params：{field1: value1, field2: value2}

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

このURLをリンクに使用するのが好きです。 angularエンコード?、&文字も見ました。これを回避できますか？

編集：

私の意図は、アンカー要素のhrefとしてURLを使用することでした。私はリクエストを送信するために$ httpを使用しますが、時々（現在のオブジェクトに基づいて）クエリパラメーターを使用してリンクを提供する必要があります

ありがとう

javascriptangularjsquerystringparameter
75
bsr

1.4+の時点でニースのソリューションがあります。 $httpParamSerializerを使用して、パラメータオブジェクトからクエリ文字列を作成できます。

var qs = $httpParamSerializer(params);

こちらのドキュメントを参照

次の規則に従ってオブジェクトを文字列に変換するデフォルトの$ http paramsシリアライザー：

{'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.
123
Armel Larcier

AngularはbuildUrl()関数を内部的に使用して、パラメーターのオブジェクトからクエリ文字列を作成します。現時点では、eval()マジックを実行したい場合を除き、$HttpProviderに対してプライベートであるため、コードで使用することはできません。

Githubの関連問題：

14
shock_one

あなたは本当に間違ったツリーをbarっているように信じています... $ http.get（url、config）または$ http.post（url、data、config）を提供する$ httpサービスを調べる必要があります。パラメータ付きのGETリクエストについては、次のSOを参照してください

$ http getパラメータが機能しない

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

これはあなたのケースで機能しますか？

3
shaunhusain

アンギュラーの内部および外部URLのフォーマットルールはわずかに異なります。

$ locationは、独自のアプリケーション内で内部ルートをアクティブ化する手段です。

外部リンクの場合、$ httpが必要です。

内部リンクの場合、ハッシュ/バング構文を確認する価値があるかもしれません。

0
Chris Reynolds