Setting options for typeahead, using Angular-ui Bootstrap

Question

Using typeahead, I am trying to set a couple of options, which are available as standard Bootstrap typeahead options

Using the following code, I'm able to set the "minLength" property by putting it in-line as "typeahead-min-length", but doing the same with "items" as "typeahead-items" does not. Is there a different/better/standard way to do this? Is there a way to attach an array of options to $scope?

<div class='container-fluid' ng-controller="TestController">

<input type="text" ng-model="selected" 
typeahead="foo for foo in foo | filter:$viewValue" typeahead-items='5' typeahead-min-length='3'>

<pre>{{selected| json}}</pre>  </div>

Update: I'm trying to stick with just AngularJS, and not use jQuery

This is my controller:

  myAppModule.controller('TestController', function($http,$scope) {
  $scope.selected = undefined;

  $http.get('data/sample.json')
       .then(function(results){
          $scope.foo = results.data; 
      });
  });

Hieu Nguyen · Accepted Answer · 2013-07-18 22:19:16Z

7

Why don't you use the JS way to initialize typeahead:

$('input.typeahead').typeahead({
    source: array_of_value_here,
    minLength: 1,
    items: 5,
    // your option values ...
});

EDIT:

I see, the AngularJS way, you can use limitTo:

<input type="text" ng-model="selected" typeahead="foo for foo in foo | filter:$viewValue | limitTo:5" typeahead-min-length='3'>

edited Jul 18, 2013 at 22:19

answered Jul 18, 2013 at 21:58

Hieu Nguyen

8,6332 gold badges38 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ktm Over a year ago

trying to stick with AngularJS

ktm Over a year ago

That's perfect Hieu, thanks. May I ask the URL for the doc you used to figure that out? Works like a charm, thanks.

Hieu Nguyen Over a year ago

It should be the AngularJS one: docs.angularjs.org/api/ng.filter:limitTo , it's also mentioned a bit here: groups.google.com/d/msg/angular-ui/ZZQug6nRLwQ/FTSQYy5zszsJ . Hope it helps ;)

Danny Over a year ago

+1 for limitTo, rather than the jQuery way. Even though it looks like an ng-repeat it didn't actually occur to me that limitTo would be an option

Collectives™ on Stack Overflow

Setting options for typeahead, using Angular-ui Bootstrap

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related