angularstrap typeahead 处理异步数据

来源：互联网发布：ubuntu jdk gz 安装编辑：程序博客网时间：2024/06/06 17:43

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

参考自：点击打开链接

1 0