您的位置：首页 > Web前端 > AngularJS

angularstrap typeahead 处理异步数据

2016-04-17 09:45 567 查看

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

参考自：点击打开链接

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： AngularJS typeahead

相关文章推荐

新的分享

章节导航