Question

今天我开始给angularJS更多关注，在我的项目中我需要geonames。我想创建一些类似jQuery UI的自动完成功能，其中包含地理名like this。

当我console.log时，一切都很好，我收回了结果，但出于某种原因，我无法将其放在typeahead的下拉列表中。

范围

$scope.cities = function(cityName)
{
    return $http.jsonp("http://ws.geonames.org/searchJSON?callback=JSON_CALLBACK&q="+cityName+"&maxRows=6").success(function(data){
        $.map(data.geonames, function(item)
        {
            return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName;
        });
    });
};

输入

<input type="text" class="span4" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">

我正在使用UI Bootstrap作为角度js，我尝试基于那个例子，但是有些事情是错的，可以请某人给我一个提示吗？

谢谢

Answer 1

$http.jsonp异步执行请求，因此您在成功回调中执行的操作将丢失。

您可以使用$q.defer或观察者（但显然后者无法与typeahead一起使用）来应用成功回调中的值：

$scope.cities = function(cityName) 
{
    var dfr = $q.defer();

    $http.jsonp("http://ws.geonames.org/searchJSON?callback=JSON_CALLBACK&q="+cityName+"&maxRows=6").success(function(data){
        dfr.resolve($.map(data.geonames, function(item)
        {
            return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName;
        }));
    });

    return dfr.promise;
};

}

Geonames JSONP结果未显示在下拉列表中

1 个答案: