引导的UI键盘缓冲显示结果列表多个属性？ [英] Bootstrap-UI Typeahead display more than one property in results list?

问题描述

我使用的UI引导预输入。它出色的作品！不过，我想知道，如果可能在结果列表中显示多个属性，甚至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?

推荐答案

要ntice从左右的预输入指令的事情=HTTP：// angular- ui.github.io/bootstrap/\">http://angular-ui.github.io/bootstrap/ 是试图模仿的的从AngularJS选择指令。这意味着所有使用的前pressions选择模型绑定和标签是 AngularJS前pressions 的。这轮流意味着你可以使用任何AngularJS前pression来计算你的标签的文本。

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

工作普拉克在这里：
<一href=\"http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=$p$pview\">http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=$p$pview

编写复杂的前pressions在预输入属性的标签可能会变得丑陋，但没有阻止你移动的标签计算逻辑暴露在一个范围的功能，例如：

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 + ')';
  };

另一个普拉克：<一href=\"http://plnkr.co/edit/ftKZ96UrVfyIg6Enp7Cy?p=$p$pview\">http://plnkr.co/edit/ftKZ96UrVfyIg6Enp7Cy?p=$p$pview

至于您对图标的问题走 - 你可以嵌入HTML标签中的前pressions但这得可怕的编写和维护。幸运的是，预输入指令允许您为匹配项目提供了一个自定义模板，像这样：

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"

在自定义模板，你可以使用任何前pressions或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>

和工作普拉克：<一href=\"http://plnkr.co/edit/me20JzvukYbK0WGy6fn4?p=$p$pview\">http://plnkr.co/edit/me20JzvukYbK0WGy6fn4?p=$p$pview

pretty整洁的指令，不是吗？

Pretty neat little directive, isn't it?

这篇关于引导的UI键盘缓冲显示结果列表多个属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！