Асинхронный угловой-bootsrap-UI typeahead: выберите директивный выпуск

Question

Мое приложение использует функцию Angular-Bootstrap-UI-Typeahead для автоматического завершения.

Как пользовательские типы, я хотел бы иметь возможность вызывать API & возвращать похожие строки.

Я следил за руководством here, и все отлично работает с API Google API.

Я также успешно поменялся в своем собственном API: я могу вызвать API, получить данные и зарегистрировать его в правильном формате в консоли браузера.

Однако, я постоянно получаю «результаты не найдены» из текстового поля. Я подозреваю, что это может быть проблемой с директивой select, но я в тупике.

Буду признателен за руководство!

Вот код:

пользовательский интерфейс (content.html)

<h4>biz results</h4> 
<pre>Model: {{user.orgName | json}}</pre> 
<input type="text" 
ng-model="user.orgName" 
placeholder="Locations loaded via $http" 
uib-typeahead="obj for obj in getLocation($viewValue)" 
typeahead-loading="loadingBiz" 
typeahead-no-results="noBiz" class="form-control" 
typeahead-wait-ms="700"> 
<i ng-show="loadingBiz" class="glyphicon glyphicon-refresh"></i> 
<div ng-show="noBiz"> 
<i class="glyphicon glyphicon-remove"></i> No Results Found 
</div> 

Угловые (script.js)

$scope.getLocation = function(val) { 
var bizRequest = $http.post('/sample', { 
    // var bizRequest = $http.post('/biz', { 
     orgName: val, 
     limit: 5 
    } 
).success(function(response){ 
    console.log(response) 
    //console.log('Biz response: ' + JSON.stringify(response)) 
    //console.log(response.data.fields.map(item)) 
    var bizArray = response.data.fields.map(function(item){ 
     return item.fields.orgName; 
    }); 
    console.log(bizArray); 
    return bizArray; 
    }); 
    console.log("Biz Request /////// " + JSON.stringify(bizRequest)) 
    return bizRequest 
}; 

Узел API (app.js)

app.post('/sample', function(req, res){ 

var resp = { 
"success": true, 
"data": { 
    "fields": [{ 
     "fields": { 
      "scid": "1111", 
      "orgName": "1111", 
      "countryCode": "1", 
      "countryName": "1", 
      "cityName": "1", 
      "addressLine": "1111" 
     }, 
     "matchedRule": { 
      "duplicateLevel": "POTENTIAL_MATCH", 
      "id": "18", 
      "rank": "1" 
     } 
    }, { 
     "fields": { 
      "scid": "2222", 
      "orgName": "2222", 
      "countryCode": "22", 
      "countryName": "22", 
      "cityName": "22", 
      "addressLine": "2 22" 
     }, 
     "matchedRule": { 
      "duplicateLevel": "POTENTIAL_MATCH", 
      "id": "18", 
      "rank": "1" 
     } 
    }] 
}, 
"errors": [], 
"warnings": [], 
"infoMessages": [] 
} 

res.send(JSON.stringify(resp)) 
}) 

Answer 1

Вы должны вернуть promise от getLocation способ при работе асинхронный typeahead. Поэтому не используйте .success там, где сломается цепочка обещаний. Вместо того, чтобы использовать .then, который помог бы вам цепи обещание, и вы можете вернуть данные из .then передать его typeahead

$scope.getLocation = function(val) { 
    var bizRequest = $http.post('/sample', { 
    // var bizRequest = $http.post('/biz', { 
     orgName: val, 
     limit: 5 
    } 
).then(function(data){ 
    response = data.data; //<-- take data in response. 
    console.log(response.data) 
    //console.log('Biz response: ' + JSON.stringify(response)) 
    //console.log(response.data.fields.map(item)) 
    var bizArray = response.data.fields.map(function(item){ 
     return item.fields.orgName; 
    }); 
    console.log(bizArray); 
    return bizArray; 
    }); 
    console.log("Biz Request /////// " + JSON.stringify(bizRequest)) 
    return bizRequest 
};