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

另一个插件: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

相当整洁的小指令,不是吗？