Waarden ophalen uit een queryreeks in een URL met AngularJS $location

Met betrekking tot $location.search, de docszeg,

Retourneer het zoekgedeelte (als object) van de huidige url wanneer aangeroepen zonder enige parameter.

In mijn URL heeft mijn queryreeks een param ?test_user_bLzgBzonder waarde. Ook $location.search()retourneert een object. Hoe krijg ik de eigenlijke tekst?


Antwoord 1, autoriteit 100%

Ik weet niet zeker of het is veranderd sinds het geaccepteerde antwoord is geaccepteerd, maar het is mogelijk.

$location.search()retourneert een object van sleutel-waardeparen, dezelfde paren als de queryreeks. Een sleutel die geen waarde heeft, wordt gewoon als waar in het object opgeslagen. In dit geval zou het object zijn:

{"test_user_bLzgB": true}

U kunt deze waarde rechtstreeks benaderen met $location.search().test_user_bLzgB

Voorbeeld (met grotere queryreeks): http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse

Opmerking: vanwege hashes (zoals het gaat naar http://fiddle.jshell.net/# /url, wat een nieuwe viool zou maken), werkt deze viool niet in browsers die geen js-geschiedenis ondersteunen (werkt niet in IE <10)

Bewerken:
Zoals aangegeven in de opmerkingen van @Naresh en @DavidTchepak, moet de $locationProviderook correct worden geconfigureerd: https://code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration


Antwoord 2, autoriteit 32%

Als u de zoekreeks alleen als tekst wilt zien, kunt u het volgende gebruiken: $window.location.search


Antwoord 3, autoriteit 26%

$location.search()retourneert een object, bestaande uit de sleutels als variabelen en de waarden als zijn waarde.
Dus: als u uw queryreeks als volgt schrijft:

?user=test_user_bLzgB

Je zou de tekst gemakkelijk als volgt kunnen krijgen:

$location.search().user

Als je geen sleutel wilt gebruiken, waarde zoals ?foo=bar, raad ik aan een hash te gebruiken #test_user_bLzgB ,

en bellen

$location.hash()

zou ‘test_user_bLzgB’ retourneren, de gegevens die u wilt ophalen.

Aanvullende informatie:

Als je de query string-methode hebt gebruikt en je krijgt een leeg object met $location.search(),
het is waarschijnlijk omdat Angular de hashbang-strategie gebruikt in plaats van de html5-strategie…
Om het werkend te krijgen, voeg je deze configuratie toe aan je module

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

Antwoord 4, autoriteit 8%

Maak eerst de URL-indeling correct om de zoekreeks te krijgen, gebruik #?q=stringdie voor mij werkt

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

Injecteer $location-service in de controller

app.controller('MyController', [ '$location', function($location) { 
    var searchObject = $location.search();
    // $location.search(); reutrn object 
    // searchObject = { foo = 'abcd' };
    alert( searchObject.foo );
} ]);

Dus de uitvoer moet abcd

. zijn


Antwoord 5, autoriteit 6%

u kunt dit ook gebruiken

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');

Antwoord 6, autoriteit 6%

Als uw $location.search()niet werkt, controleer dan of u over het volgende beschikt:

1) html5Mode(true)is geconfigureerd in de moduleconfiguratie van de app

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

2) <base href="/">is aanwezig in uw HTML

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

Referenties:

  1. base href=”/”
  2. html5Modus

Antwoord 7, autoriteit 5%

Angular ondersteunt dit soort queryreeks niet.

Het querygedeelte van de URL zou een &-gescheiden reeks sleutel-waardeparen moeten zijn, dus perfect te interpreteren als een object.

Er is helemaal geen API om queryreeksen te beheren die geen sets sleutel-waardeparen vertegenwoordigen.


Antwoord 8

In mijn NodeJS-voorbeeld heb ik een url “localhost:8080/Lists/list1.html?x1=y” die ik wil doorlopen en waarden wil verkrijgen.

Om met $location.search() te werken om x1=y te krijgen, heb ik een paar dingen gedaan

  1. scriptbron naar angular-route.js
  2. Injecteer ‘ngRoute’ in de afhankelijkheden van uw app-module
  3. Configureer uw locationProvider
  4. Voeg de basistag voor $location toe (als u dat niet doet, levert uw zoekopdracht().x1 niets op of is niet gedefinieerd. Of als de basistag de verkeerde informatie bevat, kan uw browser uw bestanden erin niet vinden script src die uw .html nodig heeft. Open altijd de weergavebron van de pagina om uw bestandslocaties te testen!)
  5. roep de locatieservice op (search())

mijn lijst1.js heeft

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

en mijn list1.html heeft

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

Gids: https://code.angularjs.org/1.2.23 /docs/guide/$locatie


Antwoord 9

Mijn oplossing is eenvoudiger: maak een fabriek en implementeer deze als één variabele. Bijvoorbeeld

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>

Snippet uitvouwen


Antwoord 10

Heel laat antwoord 🙁 maar voor iemand die in nood is,
dit werkt Angular js werkt ook 🙂 URLSearchParamsLaten we eens kijken hoe we deze nieuwe API kunnen gebruiken om waarden van de locatie te krijgen!

// Ervan uitgaande dat “?post=1234&action=edit”

var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?
post=1234&action=edit&active=1"

Ter info: IE wordt niet ondersteund

gebruik deze functie van in plaats van URLSearchParams

urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                      .exec(window.location.search);
    return (results !== null) ? results[1] || 0 : false;
}
console.log(urlParam('action')); //edit

Other episodes