Angular js am Eingangstyp ändern Renderliste Daten von HTTP-Anfrage

Question

Ich bin mit kleineren Problem stecken. Ich möchte Liste von Daten von API-Aufruf, bei Eingangstyp ändern Ereignis rendern. Was meine App ist, wenn der Benutzer beginnt, Eingabe-Typ eingeben, onchange-Ereignis ausgelöst wird, basierend darauf möchte ich Daten von API-Aufruf zurückgeben. Damit kann ich Autosuggestion geben und Benutzer diese Daten auswählen lassen. Grundsätzlich ist es ähnlich, wie google place autosuggest funktioniert. Ich möchte das nur in meiner eigenen Listenansicht anpassen.

<ion-content ng-controller="Googleplacesuggestion"> 
<h1>Search</h1> 
<label class = "item item-input"> 
<input type ="text" ng-model="search" ng-change="getGooglePlaceSuggestionAutocomplete(search)" 
     class="search-query" id="address_search" placeholder="Search"> 
</label> 
<ul class="unstyled"> 
<li ng-repeat="data in returnedData"> 
<span> {{ data }} </span> 
</li> 
</ul> 

das ist mein Controller
.controller('Googleplacesuggestion',function($scope,$http){ $scope.getGooglePlaceSuggestionAutocomplete = function($scope){ console.log($scope); $scope.returnedData = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false} ];

Dank

Answer 1

Suche etwas über debouncing das ist Technik einige Zeit zu warten, bevor eine Arbeit oder super einfache Art und Weise zu tun String-Länge

Answer 2

zu überprüfen

Besser, um Ihren Code zu posten, aber hier würde ich basierend auf meinem Verständnis vorschlagen. onchange Event-Callback ist von Javascript und ist ein Asynchronous, von dem Angular in Ihrem Callback nicht bewusst ist, wickeln Sie den Code innerhalb der Funktion in der Methode $timeout(function() {}) Methode, die Angular erzählen wird, dass sich etwas geändert hat.

Zum Beispiel:

<input type="text" onchange="valueChanged()" /> 

In Ihrem Controller:

$scope.valueChanged = function() { 
    $timeout(function() { 
      /// your code 
    }); 
}; 

Eine weitere Möglichkeit, die ng-change Richtlinie von Angular zu verwenden, wird empfohlen, Sie auf diese Weise müssen Sie Ihren Code nicht einwickeln innerhalb des $timeout Dienstes.

Außerdem gibt es verschiedene Bibliotheken, die Ihren Autocomplete-Code zur Verfügung stellen. https://angular-ui.github.io/bootstrap/#/typeahead ist einer von ihnen, wenn Sie BootStrap verwenden.