it-swarm.com.de

Abrufen von Werten aus einer Abfragezeichenfolge in einer URL mithilfe der Position AngularJS $

In Bezug auf $ location.search sagen die docs

Gibt den Suchteil (als Objekt) der aktuellen URL zurück, wenn er ohne Parameter aufgerufen wird.

In meiner URL enthält meine Abfragezeichenfolge einen Parameter '? Test_user_bLzgB' ohne Wert. '$ Location.search ()' gibt auch ein Objekt zurück. Wie bekomme ich den eigentlichen Text?

92
Ian Warburton

Nicht sicher, ob es sich geändert hat, seit die akzeptierte Antwort akzeptiert wurde, aber es ist möglich.

$location.search() gibt ein Objekt aus Schlüssel-Wert-Paaren zurück, die mit der Abfragezeichenfolge identisch sind. Ein Schlüssel ohne Wert wird nur als wahr im Objekt gespeichert. In diesem Fall wäre das Objekt:

{"test_user_bLzgB": true}

Sie können auf diesen Wert direkt mit $location.search().test_user_bLzgB zugreifen.

Beispiel (mit größerer Abfragezeichenfolge): http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse

Hinweis: Aufgrund von Hashes (da dies zu http://fiddle.jshell.net/#/url führt, was eine neue Geige erzeugen würde), wird diese Geige nicht in Browsern funktionieren, die js history nicht unterstützen (funktioniert nicht in IE <10)

Bearbeiten:
Wie in den Kommentaren von @Naresh und @DavidTchepak hervorgehoben, muss der $locationProvider auch richtig konfiguriert werden: https://code.angularjs.org/1.2.23/docs/guide/$location#-location -service-konfiguration

147
TheSharpieOne

Wenn Sie die Abfragezeichenfolge nur als Text anzeigen möchten, können Sie Folgendes verwenden: $window.location.search

47
andersh

$location.search() gibt ein Objekt zurück, das aus den Schlüsseln als Variablen und den Werten als Wert besteht. Wenn Sie also Ihre Abfragezeichenfolge wie folgt schreiben: 

?user=test_user_bLzgB

Sie könnten den Text leicht so erhalten:

$location.search().user

Wenn Sie keinen Schlüssel wie den Wert? Foo = bar verwenden möchten, empfehle ich die Verwendung eines Hashes #test_user_bLzgB,

und anrufen 

$location.hash()

würde 'test_user_bLzgB' zurückgeben, dh die Daten, die Sie abrufen möchten. 

Zusätzliche Information:

Wenn Sie die Abfragezeichenfolge-Methode verwendet haben und ein leeres Objekt mit $ location.search () erhalten, ist Wahrscheinlich, weil Angular die Hashbang-Strategie anstelle der html5-Methode verwendet ... Damit es funktioniert Fügen Sie diese Konfiguration Ihrem Modul hinzu 

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

Stellen Sie zuerst das URL-Format korrekt ein, damit die Abfragezeichenfolge #? Q = string verwendet, die für mich geeignet ist

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

Injizieren Sie $ location service in den Controller

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

    var searchObject = $location.search();

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

    alert( searchObject.foo );

} ]);

Die Ausgabe sollte also abcd sein. 

13
MasoodUrRehman

sie können dies auch verwenden

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');
10
Rolwin C

Wenn Ihre $location.search() nicht funktioniert, stellen Sie sicher, dass Sie über Folgendes verfügen:

1) html5Mode(true) ist im Modul config der App konfiguriert

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

2) <base href="/"> ist in Ihrem HTML-Code vorhanden

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

Verweise: 

  1. base href = "/"
  2. html5Mode
9
Mahesh

Angular unterstützt diese Art von Abfragezeichenfolge nicht. 

Der Abfrageteil der URL soll eine durch & getrennte Folge von Schlüssel-Wert-Paaren sein und somit als Objekt perfekt interpretierbar sein. 

Es gibt überhaupt keine API zum Verwalten von Abfragezeichenfolgen, die keine Mengen von Schlüsselwertpaaren darstellen.

7
rewritten

In meinem NodeJS-Beispiel habe ich eine URL "localhost: 8080/Lists/list1.html? X1 = y", die ich durchqueren und Werte erfassen möchte.

Um mit $ location.search () zu arbeiten, um x1 = y zu erhalten, habe ich ein paar Dinge getan

  1. skriptquelle zu angle-route.js 
  2. Fügen Sie "ngRoute" in die Abhängigkeiten Ihres App-Moduls ein 
  3. Konfigurieren Sie Ihren locationProvider 
  4. Fügen Sie das Basis-Tag für $ location hinzu (andernfalls würde Ihre Suche (). X1 nichts oder undefiniert zurückgeben. Wenn das Basis-Tag die falschen Informationen enthält, kann Ihr Browser Ihre Dateien nicht innerhalb des Skripts src finden.) Ihre .html-Anforderungen. Öffnen Sie immer die Ansichtsquelle der Seite, um Ihre Dateispeicherorte zu testen!)
  5. den Ortungsdienst aufrufen (search ())

meine list1.js hat

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

und meine list1.html hat

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

Leitfaden: https://code.angularjs.org/1.2.23/docs/guide/$location

0
Jenna Leaf

Mein Fix ist einfacher, erstellen Sie eine Factory und implementieren Sie sie als eine Variable. Zum Beispiel

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>

0
Ivan Fretes