Search code examples
angularjsbootstrap-typeahead

Available options not showing in angular-typeahead drop down menu


I've added angular-typeahead to a small angularjs app I'm writing, code built on an angularjs-example I downloaded. I've defined an array in the controller and can select an item in the view. I added ui.bootstrap in angular.module in app.js.

participants.js:

$scope.clubs = ['BBIL', 'STIL', 'Vikane IL'];

participants.html:

<div class="form-group">
  <input type="text" class="form-control" placeholder="Club" ng-model="participant.club" typeahead="club for club in clubs | filter:$viewValue">
</div>

When I select an item it's added to the text-box but the dropdown menu does not contain any text. What can I do to show the available items in the dropdown? There is maby some css magic that can be applied.

regards Claus

dropdown menu without text


Solution

  • Found out why, the docs could be more clear about this. One need to include two files in the folder app/template/typeahead, namely typeahead-match.html and typeahead-popup.html. Got them at https://github.com/angular-ui/bootstrap/tree/master/template/typeahead. Now it works like a charm. :-)