Angular-UI预先输出结果未显示在下拉列表中 [英] Angular-UI typeahead results not showing in dropdown
问题描述
我正在使用Angular-ui typeahead组件来命中自动完成API,我正在解析数据,我将其返回到一个名为 resp
的数组中。但是,我没有看到数据传递到UI中的自动完成下拉列表。顺便说一句,控制器有一个console.log,可以正确显示数据,所以我知道它从api调用返回。
Im using Angular-ui typeahead component to hit an autocomplete API, and I'm parsing the data I get back into an array called resp
. However, Im not seeing the data getting passed to the autocomplete dropdown in the UI. BTW, the controller has a console.log that displays the data correctly, so i know its returning from the api call.
这是我的控制器功能:
$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 -->
这里有几个帖子同样的问题,但没有一个真正回答我的具体问题。任何帮助表示赞赏。
There are several posts on here for this same issue but none really answer my specific problem. Any help is appreciated.
推荐答案
您的函数 getLocationForSearch()
不是好的:它必须将承诺返回到 uib-typeahead
指令。
所以工作代码是:
Your function getLocationForSearch()
is not good: it has to return a promise to uib-typeahead
directive.
So working code is:
$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的一个工作示例:
Here is a working example on Plunker:
http://plnkr.co/edit/v67vR8f3nHImGSoAUyBd?p=preview
这篇关于Angular-UI预先输出结果未显示在下拉列表中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!