angular-ui bootstrap typeahead limit is not working

Question

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.

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

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>

simme simme · Accepted Answer · 2016-10-13T08:11:52

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.

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

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.

angular-ui bootstrap typeahead limit is not working

1 Answers