Question

我正在使用Angular UI Typeahead和自定义模板。当一个人没有使用自定义模板时，开箱即用的指令会突出显示匹配的术语。但是，当使用自定义匹配模板时，匹配突出显示不起作用。

我创建了一个问题示例的插件。 Angular Typeahead Highlighting Plunk

以下是我的自定义模板：MatchTemplate.html

<div>
  <span class='type'>{{match.model.type}}</span> 
  <span class='name'>{{match.model.name}}</span>
</div>

感谢任何帮助。

Answer 1

您可以在模板中使用typeaheadHighlight过滤器：

<div>
  <span class='type' bind-html-unsafe="match.model.type"></span>
  <span class='name' bind-html-unsafe="match.model.name | typeaheadHighlight:query"></span>
</div>

您必须使用bind-html-unsafe，因为此过滤器会在匹配项周围生成HTML（<strong>标记。）

请参阅plknr。

Answer 2

您未使用typeaheadHighlight过滤器（需要bind-html）。

一个工作的例子是

<div>
  <span class='type' bind-html-unsafe="match.model.type | typeaheadHighlight:query"></span>
  <span class='name'>{{match.model.name}}</span>
</div>

查看原始匹配模板 - ＆gt; https://github.com/angular-ui/bootstrap/blob/master/template/typeahead/typeahead-match.html

在Angular UI Typehead中，有没有办法在使用自定义模板时保留匹配突出显示？

2 个答案: