Javascript 限制提前打印结果
我使用angular ui typeahead指令连接到Google Maps API并检索地址数组。通常,当我需要限制可见结果的数量时,我会执行以下操作:Javascript 限制提前打印结果,javascript,angularjs,twitter-bootstrap,angular-ui-bootstrap,bootstrap-typeahead,Javascript,Angularjs,Twitter Bootstrap,Angular Ui Bootstrap,Bootstrap Typeahead,我使用angular ui typeahead指令连接到Google Maps API并检索地址数组。通常,当我需要限制可见结果的数量时,我会执行以下操作: <input typeahead="eye for eye in array | filter:$viewValue | limitTo:10"> JavaScript: $scope.getLocation = function(val) { return $http.get('http://maps.googl
<input typeahead="eye for eye in array | filter:$viewValue | limitTo:10">
JavaScript:
$scope.getLocation = function(val) {
return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: val
}
}).then(function(res){
var addresses = [];
angular.forEach(res.data.results, function(item){
addresses.push(item.formatted_address);
});
return addresses;
});
};
目前我正在做以下工作来解决问题,我只是好奇为什么一个简单的limito
不起作用
$scope.getLocation = function(val) {
return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: val
}
}).then(function(res){
var addresses = [];
var resultNumber = res.data.results.length > 5 ? 5 : res.data.results.length;
for(var i = 0; i < resultNumber; i++){
var obj = res.data.results[i];
var addr = obj.formatted_address;
addresses.push(addr);
}
return addresses;
});
};
$scope.getLocation=函数(val){
返回$http.get('http://maps.googleapis.com/maps/api/geocode/json', {
参数:{
地址:val
}
}).然后(功能(res){
var地址=[];
var resultNumber=res.data.results.length>5?5:res.data.results.length;
对于(变量i=0;i
typeahead似乎不支持承诺。因此,最好将其绑定到一个集合,然后在收到google的响应时更新该集合。你可能会想去Bouncing tough,现在输入的每封信都有一个请求
请注意,您也不再需要该过滤器,因为该过滤器已经由google服务器端完成
非常好的解释!
$scope.getLocation = function(val) {
return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: val
}
}).then(function(res){
var addresses = [];
var resultNumber = res.data.results.length > 5 ? 5 : res.data.results.length;
for(var i = 0; i < resultNumber; i++){
var obj = res.data.results[i];
var addr = obj.formatted_address;
addresses.push(addr);
}
return addresses;
});
};
var app = angular.module('app',['ui.bootstrap']);
app.controller('Ctrl', ['$scope','$http', function($scope,$http){
$scope.locations = [];
$scope.$watch('asyncSelected', function(val) {
$http.get('http://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: val
}
}).then(function(res){
$scope.locations.length = 0;
angular.forEach(res.data.results, function(item){
$scope.locations.push(item.formatted_address);
});
});
});
}]);
<head>
<link data-require="bootstrap-css@~3.1.1" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<input type="text" ng-model="asyncSelected" placeholder="Address" typeahead="address for address in locations | limitTo:1" typeahead-loading="loadingLocations" class="form-control">
</body>
</html>