Использование $ http с Bootstrap UI

Question

Я работаю над приложением, которое использует AngularJS и Bootstrap. Я пытаюсь отчаянно, чтобы получить пример моего автозаполнения. Мой пример успешно работает, когда моя служба возвращает массив. Тем не менее, когда я пытаюсь использовать REST API с помощью службы $ http, я больше не могу получить результаты автозаполнения.

My Plunker is Here

Есть две вещи, которые мне нужно придерживаться на основе так, эта функция используется в другом месте:

1. The $http call must happen in the service. 
2. The controller must call myService.getOptions. 

Может кто-то пожалуйста, скажите мне, почему мой код не будет работать. Я в отчаянии.

Answer 1

Вам нужно, чтобы ваша служба возвращала результаты, потому что в вашем обещании она вернет весь ответ, но вам нужно предоставить только результаты, поэтому просто добавьте в свою службу картографа.

this.getOptions = function(prefix) { 
    return $http.get('http://search.ams.usda.gov/farmersmarkets/v1/data.svc/zipSearch?zip=60629').then(function(response){ 
     return response.data.results; //Return results 
    }); 
}; 

и на ваш взгляд, внести некоторые изменения, чтобы приспособиться к данным: -

typeahead="option as option.marketName for option in getOptions($viewValue)" 
<h4><span bind-html-unsafe="match.model.marketname | typeaheadHighlight:query"></span></h4> 

Demo

Или используйте картографа в службе, чтобы вернуть ожидаемый формат данных при возвращении данные: -

return $http.get('http://search.ams.usda.gov/farmersmarkets/v1/data.svc/zipSearch?zip=60629').then(function(response){ 
     return (response.data.results || []).map(function(itm){return {id:itm.id, name:itm.marketname}}); //map your data 
    }); 

Demo