数组未在 angularstrap typeahead 中返回答案

【问题标题】：Array not returning in angularstrap typeahead数组未在 angularstrap typeahead 中返回
【发布时间】：2014-11-20 05:05:02
【问题描述】：

我正在关注这个 plunker 在我的项目中创建一个预先输入的内容。

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

app.js（不适用于我的 API）

$scope.getAddress = function(viewValue) {
   var params = {address: viewValue, sensor: false};
   return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {params: params})
   .then(function(res) {
      console.log(res);
      return res.data.results;
    });
};

Index.html

<!-- Using an async data provider -->
  <div class="form-group">
    <label><i class="fa fa-home"></i> Address <small>(async via maps.googleapis.com)</small></label>
    <input 
     type="text" 
     class="form-control" 
     ng-model="selectedAddress" 
     data-animation="am-flip-x" 
     ng-options="address.formatted_address as address.formatted_address for address in getAddress($viewValue)" 
     placeholder="Enter address" 
     bs-typeahead>
  </div>

在我的情况下，我正在从 .net API 获取数据。当我控制台记录来自 API 的结果时，我可以看到数组正在从 API 返回。但是当我尝试将其返回到预先输入时，数据不会显示。但是，如果我尝试创建一个模拟对象数组，然后手动将数据插入到数组中，结果也会出现在 typeahead 中。

app.js（显示数据）

$scope.getAddress = function(viewValue) {
   var params = {address: viewValue, sensor: false};
   return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {params: params})
   .then(function(res) {
      console.log(res);
      [{formatted_address: "Alabama"},{formatted_address: "Arkansas"},{formatted_address: res.data.results[0]}]
      return res.data.results;
    });
};

为什么会发生这种情况，我该如何解决？

【问题讨论】：

标签： angularjs angular-strap

【解决方案1】：

我看不到您的完整解决方案，因此很难说出您错过了什么，但请参阅下面的有效解决方案。

var app = angular.module('app', ['mgcrea.ngStrap']);

app.controller('firstCtrl', function($scope, $http) {

  $scope.getAddress = function(viewValue) {
    var params = {
      address: viewValue,
      sensor: false
    };
    return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
        params: params
      })
      .then(function(res) {

        return res.data.results;
      });
  };

});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>

<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.1.3"></script>
<script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.1.3"></script>

<body ng-app="app">
  <div ng-controller="firstCtrl">
    <div class="form-group">
      <label><i class="fa fa-home"></i> Address <small>(async via maps.googleapis.com)</small>
      </label>
      <input type="text" class="form-control" ng-model="selectedAddress" data-animation="am-flip-x" ng-options="address.formatted_address as address.formatted_address for address in getAddress($viewValue)" placeholder="Enter address" bs-typeahead>
    </div>

  </div>
</body>

【讨论】：

有没有办法重新打开这个问题？为什么 sylwester 的 sn-p 不再工作？我希望这是一个最小的工作示例。雷纳