AngularJS + UI Bootstrap Typeahead 实现问题

Question

我正在尝试通过采用此代码来使用我的 Web Api 控制器实现 Typeahead，效果很好：

HTML

<div class='container-fluid' ng-controller="TypeaheadCtrl2">
    <pre>Model: {{result | json}}</pre>
    <input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">
</div>

app.js 中的控制器

myApp.controller('TypeaheadCtrl2', function ($scope, $http, limitToFilter) {

    //http://www.geobytes.com/free-ajax-cities-jsonp-api.htm

    $scope.cities = function (cityName) {
        return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q=" + cityName).then(function (response) {
            return limitToFilter(response.data, 15);
        });
    };
});

但是，当我将 return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q=" + cityName) 更改为调用我自己的 WebApi 控制器 return $http.jsonp("api/airports/" + cityName) 时，它停止工作。

但如果我直接调用我的 Web Api，比如http://mysite:80/api/airports/los，它会返回这个 json：

["San Martin DeLos Andes (CPC)","San Carlos DeBariloche (BRC)","Los Menucos (LMD)","Paso De Los Libres (AOL)","Barbelos (BAZ)","Los Angeles (LSQ)","Los Chiles (LSL)","Mali Losinj (LSZ)","Milos (MLO)","Volos (VOL)","Paso Caballos (PCG)","Los Mochis (LMM)","Vilanculos (VNX)","San Carlos (NCR)","Lagos (LOS)","Losuia (LSA)","Lossiemouth (LMO)","Los Angeles (JID)","Los Angeles (JBP)","Los Alamos (LAM)","Los Angeles (LAX)","Los Banos (LSN)","Lost Harbor (LHB)","Lost River (LSR)","San Carlos (SQL)","Los Angeles, CA (VNY)","Los Angeles (WHP)","Los Roques (LRV)"]

与http://gd.geobytes.com/AutoCompleteCity?filter=US&q=los返回的格式完全相同：

["Los Alamitos, CA, United States","Los Alamos, CA, United States","Los Alamos, NM, United States","Los Altos, CA, United States","Los Angeles, CA, United States","Los Banos, CA, United States","Los Ebanos, TX, United States","Los Fresnos, TX, United States","Los Gatos, CA, United States","Los Indios, TX, United States","Los Lunas, NM, United States","Los Molinos, CA, United States","Los Ojos, NM, United States","Los Olivos, CA, United States","Los Osos, CA, United States","Losantville, IN, United States","Lost City, WV, United States","Lost Creek, KY, United States","Lost Creek, PA, United States","Lost Creek, WV, United States"]

请指教。

Answer 1

尝试使用“$http.get”将承诺与“$scope.cities”的分配分开：

myApp.controller('TypeaheadCtrl2', function ($scope, $http, limitToFilter) {

    $http.get("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q=" + cityName).then(function (response) {
        $scope.cities = limitToFilter(response.data, 15);
    });
});

Answer 2

如果您的 Web Api 与您的 angularjs 应用程序在同一个域中，则无需使用 JSONP（而且您的 Web Api 似乎不支持 JSONP）。

你可以像这样使用一个简单的 GET 请求：

$scope.cities = function (cityName) {
    return $http.get("api/airports/" + cityName).then(function (response) {
        return limitToFilter(response.data, 15);
    });
};

希望这会有所帮助。

Answer 3

我认为您的 typeahead 需要一个 JSON 对象。您的 API 正在返回 javascript 数组。它应该可能以以下格式返回：

{['CITY1', 'CITY2', 'CITY3']}