数组中angularstrap预输入不返回 [英] Array not returning in angularstrap typeahead

问题描述

我按照本plunker在我的项目创建预输入。

http://plnkr.co/edit/ZjpJxXkl0v5LhQdxcqWn?p=$p$ PVIEW

app.js（不是我的API工作）

  $ scope.getAddress =功能（viewValue）{
   VAR PARAMS = {地址：viewValue，传感器：假};
   返回$ http.get（'http://maps.googleapis.com/maps/api/geo$c$c/json'，{params：一个PARAMS}）
   。然后（功能（RES）{
      的console.log（RES）;
      返回res.data.results;
    }）;
};
 

的index.html

 ＆LT;！ - 使用异步数据提供者 - ＆GT;
  ＆LT; D​​IV CLASS =表单组＆GT;
    ＆LT;标签＆gt;＆LT; I类=发发回家＆GT;＆LT; / I＆GT;地址≤（通过maps.googleapis.com异步）LT;小＆GT /小＆GT;＆LT; /标签＆gt;
    ＆LT;输入
     TYPE =文本
     类=表格控
     NG-模式=selectedAddress
     数据动画=是翻转-X
     NG-选项=address.formatted_address作为address.formatted_address在的getAddress（$ viewValue）地址
     占位=输入地址
     BS-预输入＆GT;
  ＆LT; / DIV＆GT;
 

我的客栈情况下，我从.NET API获取数据。当我安慰从API记录结果我可以看到阵列从API返回。但是当我尝试将其返回到不显示数据的预输入。但是如果我试图创建模拟对象的数组，然后将数据手动插入到数组藏汉结果出现在预输入。

app.js（显示数据）

  $ scope.getAddress =功能（viewValue）{
   VAR PARAMS = {地址：viewValue，传感器：假};
   返回$ http.get（'http://maps.googleapis.com/maps/api/geo$c$c/json'，{params：一个PARAMS}）
   。然后（功能（RES）{
      的console.log（RES）;
      [{的formatted_address：阿拉巴马}，{的formatted_address：阿肯色州}，{的formatted_address：res.data.results [0]}]
      返回res.data.results;
    }）;
};
 

为什么会这样发生，将如何解决？

解决方案

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

\r

\r

VAR应用= angular.module（'应用'，['mgcrea.ngStrap ]）;\r
\r
app.controller（'firstCtrl'，函数（$范围，$ HTTP）{\r
\r
  $ scope.getAddress =功能（viewValue）{\r
    VAR PARAMS = {\r
      地址：viewValue，\r
      传感器：假的\r
    };\r
    返回$ http.get（'http://maps.googleapis.com/maps/api/geo$c$c/json'，{\r
        params：一个PARAMS\r
      }）\r
      。然后（功能（RES）{\r
\r
        返回res.data.results;\r
      }）;\r
  };\r
\r
}）;

\r

＆LT;链接HREF =// maxcdn.bootstrapcdn.com/bootstrap/3.3 0.0 / CSS / bootstrap.min.css的rel =stylesheet属性类型=文/ CSS/＆GT;\r
\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js＆GT;＆下; /脚本＆GT;\r
\r
＆LT;脚本的src =// mgcrea.github.io/angular-strap/dist/angular-strap.js数据semver =V2.1.3＆GT;＆LT; / SCRIPT＆GT;\r
＆LT;脚本的src =// mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js数据semver =V2.1.3＆GT;＆LT; / SCRIPT＆GT;\r
\r
＆LT;机身NG-应用=应用程序＆GT;\r
  ＆LT; D​​IV NG控制器=firstCtrl＆GT;\r
    ＆LT; D​​IV CLASS =表单组＆GT;\r
      ＆LT;标签＆gt;＆LT; I类=发发回家＆GT;＆LT; / I＆GT;地址≤（通过maps.googleapis.com异步）LT;小＆GT /小＆GT;\r
      ＆LT; /标签＆gt;\r
      ＆LT;输入类型=文本级=表格控NG模型=selectedAddress数据动画=是翻转-XNG选项=address.formatted_address作为address.formatted_address在地址的getAddress（ $ viewValue）占位符=输入地址BS-预输入＆GT;\r
    ＆LT; / DIV＆GT;\r
\r
  ＆LT; / DIV＆GT;\r
＆LT; /身体GT;

\r

\r

\r

I'm following this plunker to create a typeahead in my project.

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

app.js (not working with my 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>

Inn my case i'm fetching data from a .net API. When i console log the results from the API I can see the array is returning from the API. but when i try to return it to the typeahead the data isn't displayed. however if i try to create an array of mock objects and then manually insert the data into the array aswell the results appear in the typeahead.

app.js (data is displayed)

$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;
    });
};

why could this be happening and how would i fix it?

解决方案

I can't see your full solution so it's difficult to say what did you missed but please see below for working solution.

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>

这篇关于数组中angularstrap预输入不返回的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！