web-dev-qa-db-ja.com

AngularJS：リンクにハッシュなしでクエリ文字列値を取得する

Angularjsを使用してクエリ文字列値を取得しようとしています。

私のURL：_http://localhost/example.php?sportsId=3_

var goto = $location.search()['sportsId'];を適用すると、未定義が返されます。

ただし、_Url: http://localhost/example.php#?sportsId=3_のようなURLにハッシュを追加すると

その後、正しい値3を返します。

ただし、この場合、_Error: [$parse:syntax] http://errors.angularjs.org/1.3.8/$parse/syntax?p0=undefined&p1=not%20a%20primary%20expression&p2=null&p3=sportsID%3D&p4=sportsID%3D_も提供されます

また、デフォルトの_$_REQUEST['sportsId']_はハッシュ形式で動作しません。

Angularjsを使用してクエリ文字列から値を正しく取得するにはどうすればよいですか？

javascriptphpangularjs
13
Farjad Hasan

これはAngularではありませんが、その純粋なJSであり、チャームのように機能します（dummyPathを追加しないでください。URLを使用します）。

function getUrlParameter(param, dummyPath) {
        var sPageURL = dummyPath || window.location.search.substring(1),
            sURLVariables = sPageURL.split(/[&||?]/),
            res;

        for (var i = 0; i < sURLVariables.length; i += 1) {
            var paramName = sURLVariables[i],
                sParameterName = (paramName || '').split('=');

            if (sParameterName[0] === param) {
                res = sParameterName[1];
            }
        }

        return res;
}

使用法：

var sportdsId = getUrlParameter('sportsId');
27
prototype

3つの簡単な手順でジョブを実行しました。

  1. 次のコードをコントローラー/サービスに追加して、HTML5モードのangularを構成します。

    app.config（['$ locationProvider'、function（$ locationProvider）{$ locationProvider.html5Mode（true）;}]）;

  2. HTMLにベース要素を追加します。

<base href="/">

  1. [$ location]をangularコントローラーに挿入します。

    app.controller（ 'ABCController'、['$ scope'、 '$ location'、ABCController]）;

最後に、クエリ文字列を取得するには、次のコードを使用します。

var yourId = $location.search().yourId;

答えは以前の回答にすでにあります。理解を深めるために要約しました。誰かがそれから有益になることを願っています。

2
Dash

これは私が使用するものです。基本的に受け入れられた答えと同じですが、すべてのパラメーターをオブジェクトとして返し、urlコンポーネントのデコードを処理します。

function getUrlParameters() {
    var pairs = window.location.search.substring(1).split(/[&?]/);
    var res = {}, i, pair;
    for (i = 0; i < pairs.length; i++) {
        pair = pairs[i].split('=');
        if (pair[1])
            res[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }
    return res;
}
2
gamliela

以下のリンクを参照してください

var goto = $location.search().sportsId;

AngularJS $ locationを使用してURLのクエリ文字列から値を取得する

2
Arepalli Praveenkumar

使用する必要があります

$location.search()

これは、paramsを持つオブジェクトを返すので、url？param1 = val＆param2 = val2があるとしましょう。

これにより、次の結果が得られます

{ param1 : val, param2 : val2 }

また、必ず有効にしてください

$locationProvider.html5Mode(true);
1
Chris Noring

次を使用して、$window.location.searchプロパティから検索オブジェクトを作成します。

    var search = $window.location.search
            .split(/[&||?]/)
            .filter(function (x) { return x.indexOf("=") > -1; })
            .map(function (x) { return x.split(/=/); })
            .map(function (x) {
                x[1] = x[1].replace(/\+/g, " ");
                return x;
            })
            .reduce(function (acc, current) {
                acc[current[0]] = current[1];
                return acc;
            }, {});

    var sportsId = search.sportsId;

または、どこでも使用できるqueryStringファクトリを作成します。これにより、queryStringの左部分と右部分が結合されます。 #の前と#の後

(function () {
    "use strict";

    angular
        .module("myModuleName")
        .factory("queryString", QueryStringFactory);

    function QueryStringFactory($window, $location) {

        function search() {

            var left = $window.location.search
                .split(/[&||?]/)
                .filter(function (x) { return x.indexOf("=") > -1; })
                .map(function (x) { return x.split(/=/); })
                .map(function (x) {
                    x[1] = x[1].replace(/\+/g, " ");
                    return x;
                })
                .reduce(function (acc, current) {
                    acc[current[0]] = current[1];
                    return acc;
                }, {});

            var right = $location.search() || {};

            var leftAndRight = Object.keys(right)
                .reduce(function(acc, current) {
                    acc[current] = right[current];
                    return acc;
                }, left);

            return leftAndRight;
        }

        return {
            search: search
        };

    }

}());

使用法：

var qs = queryString.search();
var sportsId = sq.sportsId;
1
CraftyFella