Bootstrap-UI Typeahead在结果列表中显示多个属性？

Question

我正在使用ui-bootstrap
typeahead。效果很棒！但是，我想知道是否有可能在结果列表中显示多个属性甚至HTML。典型问题：搜索返回多个具有相同值的对象。例如，搜索“令人惊叹的宽限期”返回[“令人惊叹的宽限期”，“令人惊叹的宽限期”]，其中一个是电影，一个是歌曲。我希望结果列表更像：

amazing grace | movie
amazing grace | song

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

Answer 1

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

例如，要显示所需的文本，您可以编写：

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

前提是您的数据模型如下所示：

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

在这里工作的小伙伴：http
://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?
p= preview

在typeahead属性中为标签编写复杂的表达式可能很难看，但是没有什么可以阻止您将标签计算逻辑移动到作用域上公开的函数，例如：

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

其中label是在范围内公开的函数：

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

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

就有关图标的问题而言，您可以将HTML嵌入标签表达式中，但是编写和维护起来很麻烦。幸运的是，typeahead指令允许您为匹配项提供自定义模板，如下所示：

typeahead-template-url="itemTpl.html"

在自定义模板中，您可以使用所需的任何表达式或AngularJS指令。在ngClass指令的一点帮助下，添加图标变得很简单：

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

和工作中的小伙伴：http
://plnkr.co/edit/me20JzvukYbK0WGy6fn4?
p=
preview

整洁的小指令，不是吗？