[英]Angular-UI typeahead results not showing in dropdown
我使用Angular-ui typeahead組件來命中自動完成API,我正在解析數據,我將其重新組合成一個名為resp
的數組。 但是,我沒有看到數據傳遞到UI中的自動完成下拉列表。 順便說一句,控制器有一個console.log,可以正確顯示數據,所以我知道它從api調用返回。
這是我的控制器功能:
$scope.getLocationForSearch = function(locationString){
$scope.locationString = locationString;
var url = '/autoComplete/' + locationString ;
$http({
method: 'GET',
url: url
}).then(function successCallback(response) {
console.clear();
var resp = response.data.RESULTS.map(function(item){
console.log(item.name);
return item.name;
});
return resp;
}, function errorCallback(response) {
console.log(response);
});
}
在我的HTML中:
<div class="input-group">
<input
type="text" class="form-control" ng-model="asyncSelected" placeholder="Search city or zip code"
uib-typeahead="item for item in getLocationForSearch($viewValue)"/>
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found
</div>
<span class="input-group-btn">
<button class="btn btn-default" name="search" ng-model="asyncSelected" type="submit" ng-click="getWeather(asyncSelected)">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</span>
</div><!-- /input-group -->
這里有幾個帖子用於同一個問題,但沒有一個真正回答我的具體問題。 任何幫助表示贊賞。
你的函數getLocationForSearch()
不好:它必須返回一個對uib-typeahead
指令的promise 。 所以工作代碼是:
$scope.getLocationForSearch = function(locationString) {
$scope.locationString = locationString;
var url = '/autoComplete/' + locationString ;
return $http({
method: 'GET',
url: url
}).then(function successCallback(response) {
console.clear();
return response.data.results.map(function(item) {
console.log(item.name);
return item.name;
});
}, function errorCallback(response) {
console.log(response);
});
}
以下是Plunker的一個工作示例:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.