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

我认为你的预先期待一个JSON对象。你的API正在返回javascript数组。它应该以下面的格式返回：

{['CITY1'，'CITY2'，'CITY3'}}

Answer 3

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

希望这有帮助。

AngularJS + UI Bootstrap Typeahead实现问题

3 个答案: