0

我正在尝试通过采用此代码来使用我的 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"]

请指教。

4

3 回答 3

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);
    });
});
于 2014-08-14T17:10:28.027 回答
0

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

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

于 2014-08-14T16:39:17.463 回答
0

如果您的 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);
    });
};

希望这可以帮助。

于 2014-08-14T17:12:24.733 回答