TypeAhead 결과를 제한하십시오
문제
Angular-UI TypeAhead 지시문을 사용하여 Google지도 API에 연결하고 주소 배열을 검색합니다.일반적으로 결과의 양을 표시 할 필요가있을 때는 다음과 같은 일을합니다 :
<input typeahead="eye for eye in array | filter:$viewValue | limitTo:10">
.
완벽하게 작동하고 결과는 10으로 제한됩니다. 그러나 비동기 결과로 똑같은 일을하려고하면 작동하지 않습니다.limitTo
에서 지정한 것보다 많은 결과를 제공합니다.
뭔가를 잘못하고 있습니까?
html :
<input ng-model="asyncSelected" typeahead="address for address in getLocation($viewValue) | limitTo:1" typeahead-loading="loadingLocations">
.
자바 스크립트 :
$scope.getLocation = function(val) {
return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: val
}
}).then(function(res){
var addresses = [];
angular.forEach(res.data.results, function(item){
addresses.push(item.formatted_address);
});
return addresses;
});
};
.
현재 해결 방법을 수행하고 있습니다. 간단한 limitTo
가 작동하지 않는 이유는 방금 호기심입니다.
$scope.getLocation = function(val) {
return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: val
}
}).then(function(res){
var addresses = [];
var resultNumber = res.data.results.length > 5 ? 5 : res.data.results.length;
for(var i = 0; i < resultNumber; i++){
var obj = res.data.results[i];
var addr = obj.formatted_address;
addresses.push(addr);
}
return addresses;
});
};
. 해결책
TypeAhead는 약속을 지원하는 것 같습니다.따라서 Google에서 응답을 받으면 해당 컬렉션을 컬렉션에 바인딩 한 다음 해당 컬렉션을 업데이트하는 것이 좋습니다.터프를 데뷔하는 것에 대해 생각하고 싶을 수도 있습니다. 이제 요청이 입력 된 모든 문자에 대해 요청이 완료됩니다.
필터가 Google Sever Side에서 이미 수행되고 있기 때문에 필터가 더 이상 필요하지 않습니다.
http://plnkr.co/edit/agwedjzvbq7ixs8el3mu?p=preview <./ P>
var app = angular.module('app',['ui.bootstrap']);
app.controller('Ctrl', ['$scope','$http', function($scope,$http){
$scope.locations = [];
$scope.$watch('asyncSelected', function(val) {
$http.get('http://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: val
}
}).then(function(res){
$scope.locations.length = 0;
angular.forEach(res.data.results, function(item){
$scope.locations.push(item.formatted_address);
});
});
});
}]);
.
<head>
<link data-require="bootstrap-css@~3.1.1" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<input type="text" ng-model="asyncSelected" placeholder="Address" typeahead="address for address in locations | limitTo:1" typeahead-loading="loadingLocations" class="form-control">
</body>
</html>
. 제휴하지 않습니다 StackOverflow