发表新帖
发表新帖

Getting values from query string in an url using AngularJS $location

后端 未结
关注
9 889
鱼传尺愫
鱼传尺愫 2020-11-27 04:36

Regarding $location.search, the docs say,

Return search part (as object) of current url when called without any parameter.

In my

相关标签:
9条回答
  • 滥情空心
    2020-11-27 04:56

    Not sure if it has changed since the accepted answer was accepted, but it is possible.

    $location.search() will return an object of key-value pairs, the same pairs as the query string. A key that has no value is just stored in the object as true. In this case, the object would be:

    {"test_user_bLzgB": true}

    You could access this value directly with $location.search().test_user_bLzgB

    Example (with larger query string): http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&also&something=Somethingelse

    Note: Due to hashes (as it will go to http://fiddle.jshell.net/#/url, which would create a new fiddle), this fiddle will not work in browsers that do not support js history (will not work in IE <10)

    Edit:
    As pointed out in the comments by @Naresh and @DavidTchepak, the $locationProvider also needs to be configured properly: https://code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration

    0 讨论(0)
  • 隐瞒了意图╮
    2020-11-27 05:02

    My fix is more simple, create a factory, and implement as one variable. For example

    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 讨论(0)
  • 醉话见心
    2020-11-27 05:03

    you can use this as well

    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');
    0 讨论(0)
  • 暖寄归人
    2020-11-27 05:09

    First make the URL format correct for getting the query string use #?q=string that works for me

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

    Inject $location service into the controller

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

    var searchObject = $location.search();

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

    alert( searchObject.foo );

} ]);

    So the out put should be abcd

    0 讨论(0)
  • 暗喜
    2020-11-27 05:13

    $location.search() returns an object, consisting of the keys as variables and the values as its value. So: if you write your query string like this: 

    ?user=test_user_bLzgB

    You could easily get the text like so:

    $location.search().user

    If you wish not to use a key, value like ?foo=bar, I suggest using a hash #test_user_bLzgB ,

    and calling 

    $location.hash()

    would return 'test_user_bLzgB' which is the data you wish to retrieve.

    Additional info:

    If you used the query string method and you are getting an empty object with $location.search(), it is probably because Angular is using the hashbang strategy instead of the html5 one... To get it working, add this config to your module 

    yourModule.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true);    
}]);
    0 讨论(0)
  • 长发绾君心
    2020-11-27 05:13

    Angular does not support this kind of query string.

    The query part of the URL is supposed to be a &-separated sequence of key-value pairs, thus perfectly interpretable as an object.

    There is no API at all to manage query strings that do not represent sets of key-value pairs.

    0 讨论(0)
 看不清?
提交回复
热议问题