Результаты ввода Angular-UI не отображаются в раскрывающемся списке

Я использую компонент Angular-ui typeahead для доступа к API автозаполнения, и я анализирую данные, которые получаю, в массив с именем resp. Однако я не вижу, чтобы данные передавались в раскрывающийся список автозаполнения в пользовательском интерфейсе. Кстати, у контроллера есть console.log, который правильно отображает данные, поэтому я знаю, что он возвращается из вызова API.

Вот моя функция контроллера:

$scope.getLocationForSearch = function(locationString){

    $scope.locationString = locationString;
    var url = '/autoComplete/' + locationString ;
    $http({
        method: 'GET',
        url: url            
    }).then(function successCallback(response) {
        console.clear();
        var resp = response.data.RESULTS.map(function(item){
            console.log(item.name);
            return item.name;
        });

        return resp;

      }, function errorCallback(response) {
        console.log(response); 
    });     
}

и в моем HTML:

    <div class="input-group">
        <input 
            type="text" class="form-control" ng-model="asyncSelected" placeholder="Search city or zip code"
            uib-typeahead="item for item in getLocationForSearch($viewValue)"/>
        <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
        <div ng-show="noResults">
          <i class="glyphicon glyphicon-remove"></i> No Results Found
        </div>
        <span class="input-group-btn">
            <button class="btn btn-default" name="search" ng-model="asyncSelected" type="submit" ng-click="getWeather(asyncSelected)">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
            </button>
        </span>
    </div><!-- /input-group -->

Здесь есть несколько сообщений по этой же проблеме, но ни один из них не отвечает на мою конкретную проблему. Любая помощь приветствуется.


javascript angularjs angular-ui-bootstrap angular-ui-typeahead
person pooky666    schedule 31.12.2015    source источник
comment
как сказал @beaver, вам нужно вернуть обещание $   -  person Joao Polo    schedule 31.12.2015

Ответы (1)


arrow_upward
13
arrow_downward

Ваша функция getLocationForSearch() не годится: она должна возвращать обещание в директиву uib-typeahead. Итак, рабочий код:

  $scope.getLocationForSearch = function(locationString) {

    $scope.locationString = locationString;
    var url = '/autoComplete/' + locationString ;

    return $http({
      method: 'GET',
      url: url
    }).then(function successCallback(response) {
      console.clear();
      return response.data.results.map(function(item) {
        console.log(item.name);
        return item.name;
      });
    }, function errorCallback(response) {
      console.log(response);
    });
  }

Вот рабочий пример на Plunker:

http://plnkr.co/edit/v67vR8f3nHImGSoAUyBd?p=preview

person beaver    schedule 31.12.2015
comment
Изначально у меня был такой же код, и я действительно не уверен, чем он отличается от того, что у меня есть. Я просто добавил переменную resp для отладки того, что возвращалось. Я изменил его обратно, но это не сработало. Кроме того, «результаты» должны быть написаны заглавными буквами... Я знаю, что это мало что меняет, но именно так возвращается объект json. Ошибок в консоли кстати нет. - person pooky666; 31.12.2015
comment
Вы должны вернуть вывод функции $http(), которая является обещанием, см. https://docs.angularjs.org/api/ng/service/$http. Вместо этого вы попытались вернуть resp, который является ответом в разрешенном обещании. Это другое дело. - person beaver; 31.12.2015
comment
ооо... return $http({... Теперь понятно. Спасибо за вашу помощь! - person pooky666; 03.01.2016
comment
Спасибо за помощь. Это верное и проверенное решение. - person Mythul; 19.10.2017