Bootstrap-UI Typeahead display more than one property in results list?

by

The thing to ntice about the typeahead directive from http://angular-ui.github.io/bootstrap/ is that tries to mimic syntax used by the select directive from AngularJS. It means that all the expressions used to select a model to bind and a label are AngularJS expressions. This in turns means that you can use whatever AngularJS expression to calculate the text of your label.

For example, to display your desired text you could write:

typeahead="item as item.title + ' (' + item.type + ')' for item in titles | filter:{title:$viewValue}"

Provided that your data model looks like follows:

$scope.titles = [
    {title: 'Amazing Grace', type: 'movie'},
    {title: 'Amazing Grace', type: 'song'}
  ];

Working plunk here:
http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=preview

Writing complex expressions for a label in the typeahead attribute might get ugly but nothing stops you from moving label calculation logic to a function exposed on a scope, ex.:

typeahead="item as label(item) for item in titles | filter:{title:$viewValue}"

where the label is a function exposed on a scope:

$scope.label = function(item) {
    return item.title + ' (' + item.type + ')';
  };

Another plunk: http://plnkr.co/edit/ftKZ96UrVfyIg6Enp7Cy?p=preview

As far as your question regarding icons go – you could embed HTML in the label expressions but this gets awful to write and maintain. Fortunately the typeahead directive allows you to provide a custom template for your matched item, like so:

typeahead-template-url="itemTpl.html"

In the custom template you can use any expressions or AngularJS directive you would like. Adding icons becomes trivial with a little help from the ngClass directive:

<script type="text/ng-template" id="itemTpl.html">
   <a tabindex="-1">
      <i ng-class="'icon-'+match.model.type"></i>
      <span  ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span>
   </a>
</script>

And the working plunk: http://plnkr.co/edit/me20JzvukYbK0WGy6fn4?p=preview

Pretty neat little directive, isn’t it?

More Related Contents:

  1. How do I create an AngularJS UI bootstrap popover with HTML content?
  2. angular.service vs angular.factory
  3. How to add custom validation to an AngularJS form?
  4. How do you prevent duplicate user properties in Firebase?
  5. What is the difference between ng-if and ng-show/ng-hide
  6. Link vs compile vs controller
  7. Angular.js directive dynamic templateURL
  8. Using protractor with loops
  9. Angularjs $q.all
  10. passing 2 $index values within nested ng-repeat
  11. Should I use `this` or `$scope`?
  12. AngularJS $http, CORS and http authentication
  13. Angularjs loading screen on ajax request
  14. AngularJS UI Router – change url without reloading state
  15. Reading response headers when using $http of Angularjs
  16. AngularJS ng-options create range
  17. $provide outside config blocks
  18. angular.min.js.map not found, what is it exactly?
  19. AngularJS – difference between pristine/dirty and touched/untouched
  20. Angularjs wrong $index after orderBy
  21. Anchor links in Angularjs?
  22. AngularJS : The correct way of binding to a service properties
  23. Run a controller function whenever a view is opened/shown
  24. Pass form to directive
  25. how does the binding and digesting work in AngularJS?
  26. Use filter on ng-options to change the value displayed
  27. Typescript async/await doesnt update AngularJS view
  28. How do I enable Webstorm intellisense for AngularJS when writing CoffeeScript
  29. ionic app cannot connect cors enabled server with $http
  30. shuffle array in ng-repeat angular

Leave a Comment