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?

Hier ist ein Plunker:

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