Angularjs 引导UI提前键入是否在结果列表中显示多个属性？

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

amazing grace | movie
amazing grace | song

---

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

关于from的

typeahead

指令需要注意的是，它试图模仿from 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'}
  ];

在这里工作：

在

typeahead

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

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

其中，

标签

是作用域上公开的函数：

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

另一个砰的一声：

至于你关于图标的问题——你可以在标签表达式中嵌入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>

非常整洁的小指令，不是吗
 ，然后看看这个演示@sza谢谢你的提示。我从来没有发现过这个问题，因为它的标题，而且我已经知道typeahead中的对象迭代，只是不知道如何显示它。干杯真干净！是你写的，不是吗？？）但由于某种原因，我很难找到好的文档。如果有一个指向文档的链接，包含此页面中的所有选项等，那就太好了。如何从嵌入在模板中的链接调用控制器函数？函数从未被调用，所以我们似乎处于不同的范围内？有关详细说明，请参阅：非常感谢您提供的示例&Plunkr。我已经在ng网格中与typeahead进行了2天的斗争，您的示例帮助我解决了一些问题。如果您有任何问题（例如，空弹出窗口），请尝试使用
bind html unsafe
而不是
ng bind html unsafe
。（这对我来说很有用-我正在使用UI.bootstrap.typehead作为boostrap3（分支）模板非常好，但如何使其访问范围参数？请参阅
http://stackoverflow.com/questions/24833151/how-to-make-bootstrap-typeahead-template-to-use-scope-parameter-in-angular
了解详细信息。