angularstrap typeahead 处理异步数据

发布时间：2020-12-17 10:12:42 所属栏目：安全来源：网络整理

导读：使用angularstrap typeahead 的时候下拉列表总是比输入的数据慢一步，注意下你的代码 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

使用angularstrap typeahead 的时候下拉列表总是比输入的数据慢一步，注意下你的代码

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

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

});

需要注意数据源使用

getAddress($viewValue)

处理请求使用

then

监听选中列表的事件，加在你自己的控制器里即可

$scope.$on('$typeahead.select',function(value,index) {
  console.log(value);
  console.log(index);
}

参考自：点击打开链接

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!