在輸入類型上的角度js改變來自HTTP請求的呈現列表數據

我陷入了小問題。我想渲染來自api調用的數據列表，對輸入類型變化事件。我的應用程序所做的是，當用戶開始在輸入類型中輸入時，onchange事件被觸發，基於此，我想從api調用中返回數據。這樣我可以提供自動消息並讓用戶選擇這些數據。基本上就像谷歌如何放置自動建議工作一樣。我只想在我自己的列表視圖中進行自定義。在輸入類型上的角度js改變來自HTTP請求的呈現列表數據

<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>

這是我的控制器
.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} ];

感謝

來源

2016-07-20 DeJavu

你能告訴我們你到目前爲止嘗試過的嗎？ –

我已將您評論中的代碼移至問題主體。您應該使用代碼編輯您的問題，而不是在評論中添加代碼，因爲評論不是永久性的，無法格式化。此外，您只在這裏包含一些HTML，您沒有包含解釋代碼邏輯的任何JavaScript。請參閱如何創建[mcve]。 – Claies

@LucasWatson 我已經添加了我做過的代碼示例。 – DeJavu

搜索一些關於debouncing這是技術做了一些工作之前要等待一段時間，或超簡單的方法來檢查字符串的長度

來源

2016-07-20 15:54:56 neuronet

這並不是一個完整的答案。這可能更適合作爲評論。 – Claies

更好地發佈您的代碼，但在這裏我會建議根據我的理解。 onchange事件回調來自Javascript並且是Angular在您的回調中未意識到的異步，將代碼封裝在$timeout(function() {})方法調用中的函數內部，這將告訴Angular某些內容已發生變化。

例如：

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

在你的控制器：

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

這是推薦使用ng-change指令的角度，這樣你就不必包裝你的代碼的另一種最佳的選擇裏面的$timeout服務。

此外，還有各種庫提供您的自動完成代碼。如果您使用BootStrap，https://angular-ui.github.io/bootstrap/#/typeahead就是其中之一。

來源

2016-07-20 15:58:52

不要這樣做;使用'ng-change'。但是，這可能不是用戶所遇到的問題，因爲他們並沒有真正提供很多背景...... – Claies

感謝@Claies，我正在更新相同的內容。 –

在輸入類型上的角度js改變來自HTTP請求的呈現列表數據

回答

相關問題