Question

我一直在尝试使用工厂方法中的jsonp回调函数从ui-bootstrap模块（https://angular-ui.github.io/bootstrap/）填充uib-typeahead。

这是我的工厂功能

autoCompleteCity: function(city){
            return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK&filter=US&q="+city);
}

这是我的控制器

.controller('searchCtrl', function($scope, $rootScope, $http, owm, limitToFilter) {
    $scope.cities = function(cityName) {
        if(cityName.length > 2){
            owm.autoCompleteCity(cityName)
                .success(function(response){
                   return limitToFilter(response.data, 10);
                });
         }
     }

这是我的HTML

      <input class="form-control" type="text" placeholder="City your seraching for" ng-model="result" uib-typeahead="suggestion for suggestion in cities($viewValue)" >

你可以想象jsonp回调工作正常并返回一个格式很好的数组。问题是typeahead表单元素现在不起作用。它似乎无法遍历数据（建议在城市中建议（$ viewValue））。

任何想法。它似乎是一个范围问题，因为如果我在success（）函数之外硬编码一个名字数组就可以了。

帮助，想法？

Answer 1

uib-typeahead期待结果已解决的承诺。

看一下这篇文章：angular.js ui + bootstrap typeahead + asynchronous call

而不是使用IF条件来检查名称长度。使用 typeahead-min-length 可以更轻松地仅在$ viewValue＆gt;时调用城市2像这样：

<input class="form-control" type="text" placeholder="City your seraching for" ng-model="result" typeahead-min-length="3" uib-typeahead="suggestion for suggestion in cities($viewValue)" >

你的控制器：

 .controller('searchCtrl', function($scope, $rootScope, $http, owm, limitToFilter) {
    $scope.cities = function(cityName) {
        return owm.autoCompleteCity(cityName)
            .then(function(response){
               return limitToFilter(response.data, 10);
            });
    }
}

jsonp typeahead not population my uib-typeahead form element

1 个答案: