异步 Angular-bootstrap-UI typeahead：选择指令问题

Question

我的应用程序正在使用Angular-Bootstrap-UI-Typeahead 功能进行自动完成。

当用户键入时，我希望能够调用 API 并返回类似的字符串。

我遵循了here 的指导，使用开箱即用的 Google API 一切正常。

我还成功地交换了我自己的 API：我能够调用 API、获取数据并在浏览器控制台中以正确的格式记录它。

但是，我经常从文本框中得到“未找到结果”。 我怀疑这可能是 select 指令的问题，但我被难住了。

我将非常感谢任何有关这方面的指导！

这里有一些代码：

用户界面（内容.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>

Angular (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

在处理异步预输入时，您必须从 getLocation 方法返回 promise。所以不要在那里使用.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
};