AngularJS ui bootstrap typeahead 从不显示结果

Question

我的html代码是：

<p>
    <input type="text" ng-model="destination" placeholder="Destination"
        uib-typeahead="dest as dest.name for dest in getDestinations($viewValue)" typeahead-loading="loadingDestinations"
        typeahead-no-results="noResults" typeahead-min-length="3">

    <i ng-show="loadingDestinations">...</i>

    <div ng-show="noResults">
        <i>xxx - </i> No Destinations Found
    </div>
</p>

还有我的 getDestinations() 函数，returns 一个 HttpPromise:

$scope.getDestinations = function(viewValue) {
    console.log(viewValue);
    return $http.get('/api/destAutoComplete', {
        params : {
            prefix: viewValue,
            countryId: 94
        }
    });
}

哪个 returns 对来自服务器的输入 "ist" 的响应：

[
{
"name": "Costa del Sol / Istan",
"cityId": 5452,
"locationId": 30083
},
{
"name": "Istanbul",
"cityId": 1122,
"locationId": null
}
]

如您所见，服务器 returns 将结果正确过滤为 json 数组，但预先输入从不显示结果，并且总是显示 "No Destinations Found"。我究竟做错了什么？我试图在预输入下拉列表中显示 "name" 作为标签，并在选择一个时将整个 dest 对象设置为范围内的目标。

Answer 1

这是因为您忘记了return您的承诺对象。根据 Angular Bootsrap UI code comment,

Any function returning a promise object can be used to load values asynchronously.

试试这个

$scope.getDestinations = function(viewValue) {
    console.log(viewValue);
    return $http.get('/api/destAutoComplete', {
        params: {
            prefix: viewValue,
            countryId: 94
        }
    }).then(function(response) {
        // or whatever response you are getting
        return response.data.results;
    });;
}

笨蛋：http://plnkr.co/edit/rIsiEjDBajZb0JPaNjZB?p=preview

AngularJS ui bootstrap typeahead 从不显示结果

AngularJS ui bootstrap typeahead never shows results

angularjs

angular-ui-bootstrap