AngularJS $location을 사용하여 URL 쿼리 문자열에서 값 가져오기
★★★에 $location.search의사가 말하길
매개 변수 없이 호출할 경우 현재 URL의 검색 부분(개체)을 반환합니다.
URL에서 URL이 .?test_user_bLzgB아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아.$location.search()오브젝트를 반환합니다.어게 하하 문문 문?? ???
승인된 답변이 받아들여진 후 변경되었는지 여부는 확실하지 않지만 가능합니다.
$location.search()는 쿼리 문자열과 동일한 키와 값 쌍의 개체를 반환합니다.사실대로 말하다는 다음과
{"test_user_bLzgB": true}
은 직접 할 수 .$location.search().test_user_bLzgB
예(쿼리 문자열이 큰 경우):http://fiddle.jshell.net/TheSharpieOne/yHv2p/4/show/?test_user_bLzgB&somethingElse&something=SomethingElse
주의: 해시(http://fiddle.jshell.net/#/url에 접속하여 새로운 바이올린을 생성하기 때문에 이 바이올린은 js 이력을 지원하지 않는 브라우저에서는 동작하지 않습니다(IE <10에서는 동작하지 않습니다).
★★★★
@ 및 된 바와 @Naresh @DavidTchepak은 @DavidTchepak입니다.$locationProvider또, https://code.angularjs.org/1.2.23/docs/guide/$location#-location-service-configuration 를 올바르게 설정할 필요가 있습니다.
볼 에는 다음과 같이 수 .$window.location.search
$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);
}]);
먼저 쿼리 문자열을 사용하기 위한 올바른 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여야 합니다.
이것도 쓸 수 있어요.
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');
의 '' ''가$location.search()하지 않는 해 주세요.
1)html5Mode(true)앱 모듈 구성에서 구성됨
appModule.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
2)<base href="/">는 HTML에 있습니다.
<head>
<base href="/">
...
</head>
참고 자료:
Angular는 이런 종류의 쿼리 문자열을 지원하지 않습니다.
URL의 쿼리 부분은&- 키-값 쌍의 구분된 시퀀스로서 개체로 완벽하게 해석할 수 있습니다.
키와 값 쌍의 집합을 나타내지 않는 쿼리 문자열을 관리하기 위한 API는 전혀 없습니다.
내 노드JS의 예에서는 트래버스하여 값을 취득하는 URL "localhost:8080/Lists/list1.html?x1=y"가 있습니다.
$location을 사용하기 위해.x1=y를 얻기 위해 search()를 몇 가지 했습니다.
- 스크립트 소스를 angular-route.module로 설정합니다.
- 앱 모듈의 종속성에 'ngRoute' 삽입
- location Provider 설정
- $location의 기본 태그를 추가합니다(그렇지 않으면 검색().x1은 아무것도 반환되지 않거나 정의되지 않습니다).또는 기본 태그에 잘못된 정보가 있는 경우 브라우저는 .html이 필요한 스크립트 src 내에서 파일을 찾을 수 없습니다.항상 페이지 뷰 소스를 열어 파일 위치를 테스트합니다.)
- 로케이션 서비스(search())를 호출합니다.
my list1.my list1.my list는
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();
});
그리고 내 리스트1.2011은
<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
수정은 보다 단순하고, 공장을 만들고, 하나의 변수로 구현할 수 있습니다.예를들면
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}}¶m2={{param2}}) -> this is a one variable, the factory searchCustom split and restructure in the array params
-->
<a href="#seach/(param1={{param1}}¶m2={{param2}})">
<buttom ng-click="searchData()" >Busqueda</buttom>
</a>
</form>
</div>
</body>답변이 매우 늦었습니다:(그러나 도움이 필요한 사람에게는 Angular js도 동작합니다:) URLearch Params 이 새로운 API를 사용하여 위치로부터 값을 얻는 방법에 대해 알아보겠습니다.
// "?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"
참고로 IE는 지원되지 않습니다.
URLearchParams 대신 에서 이 함수를 사용합니다.
urlParam = function (name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)')
.exec(window.location.search);
return (results !== null) ? results[1] || 0 : false;
}
console.log(urlParam('action')); //edit
언급URL : https://stackoverflow.com/questions/16964444/getting-values-from-query-string-in-an-url-using-angularjs-location
'programing' 카테고리의 다른 글
| Bolley Json Object Request Post 매개 변수가 더 이상 작동하지 않습니다. (0) | 2023.03.23 |
|---|---|
| 형식 스크립트 스타일 구성 요소 오류: "형식 '{ children: string; }'에 형식 'IntrinsicAttributes'와 공통 속성이 없습니다." (0) | 2023.03.23 |
| WordPress CSRF 공격 초안 상태 (0) | 2023.03.23 |
| MUI 그리드 항목에서 항목을 수평으로 중앙에 배치하려면 어떻게 해야 합니까? (0) | 2023.03.23 |
| Wordpress에서 If, If Else 및 other를 사용하는 방법 (0) | 2023.03.23 |