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（）函数，它返回一个HttpPromise：

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

返回输入的响应＆＃34; ist＆＃34;来自服务器：

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

正如您所见，服务器将正确过滤的结果作为json数组返回，但是typeahead从不显示结果，并始终显示＆＃34; No Destinations Found＆＃34;。我究竟做错了什么？我想表明＆＃34; name＆＃34;作为typeahead下拉列表中的标签，并在选择一个时将整个dest对象设置为作用域中的目标。

Answer 1

这是因为您忘记返回您的承诺对象。根据Angular Bootsrap UI code comment，

任何返回promise对象的函数都可以用来异步加载值。

试试这个

$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;
    });;
}

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

AngularJS ui bootstrap typeahead从不显示结果

1 个答案: