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

Question

我正在使用 ui-bootstrap 预输入。它工作得很好!但是，我想知道是否可以在结果列表中显示多个属性甚至 HTML。典型问题:搜索返回多个具有相同值的对象。例如，搜索 'amazing grace' 返回 ['amazing grace', 'amazing grace'] 其中一个是电影，一个是歌曲。我希望结果列表更像:

amazing grace | movie
amazing grace | song

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

Answer 1

typeahead 的注意事项来自 http://angular-ui.github.io/bootstrap/ 的指令是试图模仿 select directive 使用的语法吗？来自 AngularJS。这意味着用于选择要绑定(bind)的模型和标签的所有表达式都是AngularJS expressions .这反过来意味着您可以使用任何 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

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