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

95

$ location.searchに関して、ドキュメントは言う、

パラメータなしで呼び出された場合、現在のURLの（オブジェクトとして）検索部分を返します。

私のURLでは、クエリ文字列に値のないパラメーター '？test_user_bLzgB'があります。また、「$ location.search（）」はオブジェクトを返します。実際のテキストを取得するにはどうすればよいですか？

javascript  angularjs 
— イアン・ウォーバートン
ソース
あなたはどんなオブジェクトを手に入れますか？あなたが直面している問題を実証するプランカーやフィドルはありますか？あなたは正しいです$location.search()が、私はあなたがそれを呼び出すときに得られる「オブジェクト」を確認したいと思います...
— callmekatootie
それが何であるかわかりません。プロパティを列挙してみましたが、何もないようです。
— Ian Warburton
クエリ文字列を調べるフィドルの実行方法がわからない。
— Ian Warburton

回答:

151

受け入れられた回答が受け入れられてから変更されたかどうかはわかりませんが、可能です。

$location.search()クエリ文字列と同じペアであるキーと値のペアのオブジェクトを返します。値のないキーは、trueとしてオブジェクトに格納されるだけです。この場合、オブジェクトは次のようになります。

{"test_user_bLzgB": true}

この値に直接アクセスできます $location.search().test_user_bLzgB

例（クエリ文字列が大きい場合）：http : //fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse

注：ハッシュのために（新しいフィドルを作成するhttp://fiddle.jshell.net/#/urlに移動するため）、このフィドルはjs履歴をサポートしないブラウザーでは機能しません（機能しません） IE <10）

編集：
@Nareshおよび@DavidTchepakのコメントで指摘されているように、$locationProviderも適切に構成する必要があります：https : //code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration

— TheSharpieOne
ソース
3
Nareshが述べたように、code.angularjs.org$locationProvider / 1.2.23 / docs / guide / …も適切に構成する必要があります（これにより問題が発生しました。リンクが他の人の時間を節約できることを願っています）
— David Tchepak '27
2
ロケーションプロバイダーを構成するには、次のものが必要です。window.app.config ['$ locationProvider'、（$ locationProvider）-> $ locationProvider.html5Mode true]また、HTMLファイルにベースタグが必要です：<base href = "/">
— アミンアリアナ2015年
説明と役立つヒントをありがとう、ただ私のケースを共有してください。私はuserConfigと呼ばれる定数を作成し、すべてを中に入れます。ユーザーの柔軟性のために、一部の設定はクエリ文字列によってオーバーライドできます。これを使用し、HTMLタグ内のglobalControllerスコープ変数にクエリを配置して、子コントローラーがサービスを含むパラメーターを取得できるようにします。これは、userConfigもサービスに配置されているためです。したがって、事実上、彼らは一緒に相互作用することができます。
— simongcc 2015年
私はjs関数を使用する方が簡単だとわかりました。$ location.search（）は多くの可動部分を持っています。クエリ文字列パラメーターを取得するためのコード例はたくさんあります。
— nuander '19年
@TheSharpieOne少し時間があれば、この質問を見てください。stackoverflow.com/questions/43121888/...
— レオン・ギャバン
48

クエリ文字列をテキストとして表示するだけの場合は、次を使用できます。 $window.location.search

— Andersh
ソース
11
これはどうして答えではないのですか？多分それはビット短いですが、ない質問に答えるように見えます。
— レオ・ラム
タイムスタンプを確認すると、ダンのコメントの2時間後に回答が編集されています。それはそれほど重要ではありませんが、レオのコメントが賛成投票されているのに衝撃的だったので、指摘したいと思いました。
— ビルターベル2015
39

$location.search()変数としてのキーとその値としての値で構成されるオブジェクトを返します。したがって、次のようにクエリ文字列を記述したとします。

?user=test_user_bLzgB

次のように簡単にテキストを取得できます。

$location.search().user

キー、？foo = barなどの値を使用しない場合は、ハッシュ#test_user_bLzgBを使用することをお勧めします。

そして呼び出す 

$location.hash()

取得したいデータである「test_user_bLzgB」を返します。

追加情報：

クエリ文字列メソッドを使用し、$ location.search（）で空のオブジェクトを取得している場合、おそらくAngularがhtml5の代わりにハッシュバング戦略を使用しているためです...機能させるには、この設定をモジュール 

yourModule.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true);    
}]);
— アレハンドロチャッティ
ソース
13

最初に、クエリ文字列を取得するためのURL形式を正しいものにします＃？q = stringを使用してください

http://localhost/codeschool/index.php#?foo=abcd

$ locationサービスをコントローラーに挿入します

app.controller('MyController', [ '$location', function($location) { 

    var searchObject = $location.search();

    // $location.search(); reutrn object 
    // searchObject = { foo = 'abcd' };

    alert( searchObject.foo );

} ]);

したがって、出力はabcdである必要があります

— MasoodUrRehman
ソース
10

これも使えます

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var queryValue = getParameterByName('test_user_bLzgB');
— ロルウィンクラスタ
ソース
3
その関数を別のSOF回答からコピーしました...ソースを参照するのに最適です。
— arcseldon
はい、これは私が使用するものです
— 。SOの
10

あなた$location.search()が働いていない場合は、次のものがあることを確認してください：

1）html5Mode(true)アプリのモジュール構成で構成されている

appModule.config(['$locationProvider', function($locationProvider) {
   $locationProvider.html5Mode(true);
}]);

2）<base href="https://stackoverflow.com/">HTMLに存在する

<head>
  <base href="/">
  ...
</head>

参照：

  1. base href = "/"
  2. html5Mode
— マヘシュ
ソース
「html5Mode（true）はアプリのモジュール構成で構成されています」-説明
— 15ee8f99-57ff-4f92-890c-b56153
@EdPlunkett-申し訳ありませんが、角度付きアプリオブジェクトのconfigメソッドで構成されていると言っていました。たとえば、次のとおりです。var appModule = angular.module（ 'myAppModule'、[]）;
— Mahesh
おかげで、私はAngularにかなり
— 慣れ
はい、それは非常に重要です。同じ問題に直面しました
— バハディールタシュデミール
7

Angularはこの種のクエリ文字列をサポートしていません。

URLのクエリ部分は、&-で区切られたキーと値のペアのシーケンスであると想定されているため、オブジェクトとして完全に解釈可能です。

キーと値のペアのセットを表さないクエリ文字列を管理するAPIはまったくありません。

— 書き直された
ソース
0

私のNodeJSの例では、「localhost：8080 / Lists / list1.html？x1 = y」というURLがあり、これをトラバースして値を取得します。

$ location.search（）を使用してx1 = yを取得するために、いくつかのことを行いました

  1. angular-route.jsへのスクリプトソース
  2. 'ngRoute'をアプリモジュールの依存関係に挿入する
  3. locationProviderを構成する
  4. $ locationの基本タグを追加します（そうしないと、search（）。x1は何も返さないか、未定義になります。または、基本タグに間違った情報がある場合、ブラウザーはスクリプトsrc内のファイルを見つけることができません。 .htmlが必要です。ファイルの場所をテストするには、常にページのソースを開いてください！）
  5. 位置情報サービス（search（））を呼び出す

私のlist1.jsは

    var app = angular.module('NGApp', ['ngRoute']);  //dependencies : ngRoute
    app.config(function ($locationProvider) { //config your locationProvider
         $locationProvider.html5Mode(true).hashPrefix('');
    });

    app.controller('NGCtrl', function ($scope, datasvc, $location) {// inject your location service
        //var val = window.location.href.toString().split('=')[1];
        var val = $location.search().x1;    alert(val);
        $scope.xout = function () {
           datasvc.out(val)
           .then(function (data) {
              $scope.x1 = val;
              $scope.allMyStuffs = data.all;
           });
        };
        $scope.xout();
    });

そして私のlist1.htmlは

<head>
    <base href=".">
    </head>
<body ng-controller="NGCtrl">
<div>A<input ng-model="x1"/><br/><textarea ng-model="allMyStuffs"/></div>
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="list1.js"></script>
</body>

ガイド：https : //code.angularjs.org/1.2.23/docs/guide/$location

— ジェナ・リーフ
ソース
0

私の修正はより単純で、ファクトリーを作成し、1つの変数として実装します。例えば

angular.module('myApp', [])

// This a searchCustom factory. Copy the factory and implement in the controller
.factory("searchCustom", function($http,$log){    
    return {
        valuesParams : function(params){
            paramsResult = [];
            params = params.replace('(', '').replace(')','').split("&");
            
            for(x in params){
                paramsKeyTmp = params[x].split("=");
                
                // Si el parametro esta disponible anexamos al vector paramResult
                if (paramsKeyTmp[1] !== '' && paramsKeyTmp[1] !== ' ' && 
                    paramsKeyTmp[1] !== null){          
                    
                    paramsResult.push(params[x]);
                }
            }
            
            return paramsResult;
        }
    }
})

.controller("SearchController", function($scope, $http,$routeParams,$log,searchCustom){
    $ctrl = this;
    
    var valueParams = searchCustom.valuesParams($routeParams.value);
    valueParams = valueParams.join('&');

    $http({
        method : "GET",
        url: webservice+"q?"+valueParams
    }).then( function successCallback(response){
        data = response.data;
        $scope.cantEncontrados = data.length; 
        $scope.dataSearch = data;
        
    } , function errorCallback(response){
        console.log(response.statusText);
    })
      
})
<html>
<head>
</head>
<body ng-app="myApp">
<div ng-controller="SearchController">
<form action="#" >
                          
                            
                            <input ng-model="param1" 
                                   placeholder="param1" />
                            
                            <input  ng-model="param2" 
                                    placeholder="param2"/>
                        
<!-- Implement in the html code 
(param1={{param1}}&param2={{param2}}) -> this is a one variable, the factory searchCustom split and restructure in the array params
-->          
                        <a href="#seach/(param1={{param1}}&param2={{param2}})">
                            <buttom ng-click="searchData()" >Busqueda</buttom>
                        </a>
                    </form> 
</div>
</body>
スニペットを展開

— イヴァン・フレット
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.