angular-ui bootstrap typeahead limit不起作用

I am new to angularjs. From this web site https://angular-ui.github.io/bootstrap/ I got typeahead directive for my angularjs project but my limit and filter are not working here is my code.

我是angularjs的新手。从这个网站https://angular-ui.github.io/bootstrap/我得到了我的angularjs项目的typeahead指令,但我的限制和过滤器在这里不起作用是我的代码。

When I type "c" in the text field I want only 8 records to be displayed but instead all records are displayed.

当我在文本字段中键入“c”时,我只想显示8条记录,而是显示所有记录。

plunker http://plnkr.co/edit/RhwHmKwSxWBh3rp0u85O?p=preview

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {

  $scope.getLocation = function(val) {
    return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: val,
        sensor: false
      }
    }).then(function(response){
      return response.data.results.map(function(item){
        return item.formatted_address;
      });
    });
  };
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<script type="text/ng-template" id="customTemplate.html">
  <a>
      <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
      <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
  </a>
</script>
<div class='container-fluid' ng-controller="TypeaheadCtrl">


    <h4>Asynchronous results</h4>
    <pre>Model: {{asyncSelected | json}}</pre>
    <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue) | filter:$viewValue  |limitTo:8" typeahead-loading="loadingLocations" class="form-control">
    <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>

</div>
  </body>
</html>

1 个解决方案

#1

I know this is an old question, but I'll go ahead and answer it anyway for future reference:

我知道这是一个老问题,但我会继续回答它,以备将来参考:

This is a known behaviour when loading via $http as the limit would apply to the promise when calling your get method, which would result in it not applying to the actual result set by the time your promise resolves.

这是通过$ http加载时的已知行为,因为在调用get方法时限制将应用于promise,这将导致它在promise解析时不应用于实际结果集。

See issue #1740 in ui.bootstrap repository for more information on this.

有关详细信息,请参阅ui.bootstrap存储库中的问题#1740。

The work around for this is either rolling your own filter function and return a promise from that filter instead of fetching the records directly or implement a limit parameter in the API and limit it server side.

解决此问题的方法是滚动您自己的过滤器函数并从该过滤器返回承诺,而不是直接获取记录或在API中实现限制参数并限制它在服务器端。

#1