Schränken Sie die Typeahead-Ergebnisse ein
Ich verwende die Typeahead-Direktive angle-ui, um eine Verbindung zur Google Maps-API herzustellen und ein Array von Adressen abzurufen. Wenn ich die Anzahl der sichtbaren Ergebnisse begrenzen muss, mache ich normalerweise Folgendes:
<input typeahead="eye for eye in array | filter:$viewValue | limitTo:10">
Das funktioniert perfekt und die Ergebnisse sind auf 10 begrenzt. Wenn ich jedoch versuche, dasselbe mit asynchronen Ergebnissen zu tun, funktioniert es nicht. Es wird mehr Ergebnisse geben, als ich im angegeben habelimitTo
.
Mache ich unten etwas falsch?
HTML:
<input ng-model="asyncSelected" typeahead="address for address in getLocation($viewValue) | limitTo:1" typeahead-loading="loadingLocations">
JavaScript:
$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;
});
};
Derzeit mache ich Folgendes, um das Problem zu umgehen, ich bin nur neugierig, warum eine einfachelimitTo
funktioniert nicht
$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;
});
};