AngularJS + UI Bootstrap Typeahead 实现问题 [英] AngularJS + UI Bootstrap Typeahead implementation issue

问题描述

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

HTML

<预>模型:{{结果|json}}</pre><input type="text" ng-model="result" typeahead="建议在城市中的建议($viewValue)">

app.js 中的控制器

myApp.controller('TypeaheadCtrl2', function ($scope, $http, limitToFilter) {//http://www.geobytes.com/free-ajax-cities-jsonp-api.htm$scope.cities = 函数(城市名称){return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q=" + cityName).then(function (response) {返回 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)","洛杉矶 (LSQ)","洛杉矶 (LSL)","Mali Losinj (LSZ)","Milos (MLO)","Volos (VOL)","Paso Caballos (PCG)","Los Mochis(LMM)"、"维兰库洛斯 (VNX)"、"圣卡洛斯 (NCR)"、"拉各斯 (LOS)"、"洛苏亚 (LSA)"、"洛西茅斯 (LMO)"、"洛杉矶 (JID)"、"洛杉矶 (JBP)"、"洛斯阿拉莫斯 (LAM)"、"洛杉矶 (LAX)"、"洛斯巴诺斯 (LSN)"、"失落港 (LHB)"、"迷失河 (LSR)"、"圣卡洛斯"(SQL)","加利福尼亚州洛杉矶 (VNY)","洛杉矶 (WHP)","洛斯罗克斯 (LRV)"]

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

[美国加利福尼亚州洛斯阿拉莫斯"、美国加利福尼亚州洛斯阿拉莫斯"、美国新墨西哥州洛斯阿拉莫斯"、美国加利福尼亚州洛斯阿尔托斯"、美国洛杉矶", 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,美国西弗吉尼亚州"]

请指教.

解决方案

如果您的 Web Api 与您的 angularjs 应用程序在同一个域中，则无需使用 JSONP(而且您的 Web Api 似乎无论如何都不支持 JSONP).

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

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

希望这会有所帮助.

I am trying to implement Typeahead using my Web Api controller by adopting to this code, that works fine:

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>

Controller in 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);
        });
    };
});

However when I change return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q=" + cityName) to call my own WebApi controller return $http.jsonp("api/airports/" + cityName) it stops working.

But if I call my Web Api directly, like http://mysite:80/api/airports/los it returns this 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)"]

which is in exactly the same format as returned by 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"]

Please advise.

解决方案

There is no need to use JSONP if your Web Api is on the same domain as your angularjs application (and your Web Api doesn't seems to support JSONP anyway).

You could just use a simple GET request like this:

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

Hope this helps.

这篇关于AngularJS + UI Bootstrap Typeahead 实现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！