Bootstrap-UI Typeahead 在结果列表中显示多个属性? [英] Bootstrap-UI Typeahead display more than one property in results list?

问题描述

我正在使用 ui-bootstrap typeahead.它的工作非常出色！但是，我想知道是否可以在结果列表中显示多个属性甚至 HTML.典型问题:搜索返回多个具有相同值的对象.例如，搜索奇异恩典"返回 ['奇异恩典'、'奇异恩典']，其中一个是电影，一个是歌曲.我希望结果列表更像:

I'm using ui-bootstrap typeahead. It works brilliantly! However, I'm wondering if its possible to display multiple properties or even HTML in the results list. Typical problem: the search returns more than one object with the same value. Eg search for 'amazing grace' return ['amazing grace', 'amazing grace'] where one is the movie and one is the song. I would like the results list to be more like:

amazing grace | movie
amazing grace | song

...所以用户确切地知道他们在选择什么.更好的是标题旁边的图标.换句话说，列表中的每个结果都包含一些 HTML.这些中的任何一个都可以开箱即用吗?

... so the user knows exactly what they're selecting. Even better would be an icon next to the title. In other words, each result in the list contains some HTML. Can either of these be done out of the box?

推荐答案

http://angular-ui.github.io/bootstrap/ 是试图模仿 选择指令.这意味着用于选择要绑定的模型和标签的所有表达式都是 AngularJS 表达式.这反过来意味着您可以使用任何 AngularJS 表达式来计算标签的文本.

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'}
  ];

在这里工作:http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=preview

在 typeahead 属性中为标签编写复杂的表达式可能会变得丑陋，但没有什么能阻止您将标签计算逻辑移动到在作用域上公开的函数，例如:

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}"

其中 label 是一个暴露在作用域上的函数:

where the label is a function exposed on a scope:

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

另一个 plunk:http://plnkr.co/edit/ftKZ96UrVfyIg6Enp7Cy?p=preview

就您关于图标的问题而言 - 您可以在标签表达式中嵌入 HTML，但这编写和维护起来很糟糕.幸运的是，typeahead 指令允许您为匹配的项目提供自定义模板，如下所示:

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"

在自定义模板中，您可以使用任何您喜欢的表达式或 AngularJS 指令.在 ngClass 指令的帮助下，添加图标变得微不足道:

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>

还有工作的 plunk:http://plnkr.co/edit/me20JzvukYbK0WGy6fn4?p=preview

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

非常简洁的小指令，不是吗?

Pretty neat little directive, isn't it?

这篇关于Bootstrap-UI Typeahead 在结果列表中显示多个属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！