javascript - AngularJS UI Typeahead - 为结果的属性之一设置样式

Question

我一直在使用这个线程来指导我使用出色的 typeahead 指令。

但是我有点卡住了。我需要将样式应用于结果中的一个属性。

我plunker 这里有一个。

我的问题是我真的不明白如何将一个类应用于结果末尾显示的 supervisor.address 属性。

HTML在下面。

<div class="container-fluid" ng-controller="TypeaheadCtrl">
        <div>Selected: <span>{{selected}}</span></div>
        <div><input type="text" ng-model="selected" typeahead="supervisor as supervisor.firstname +' '+supervisor.surname+''+' ('+supervisor.address+')' for supervisor in supervisors | filter:{firstname: $viewValue}:startsWith | limitTo: 8" typeahead-template-url="itemTpl.html"></div>
</div>

Answer 1

这在你的 plunker 中对我有用：

<span ng-bind-html-unsafe="match.model.firstname+' '+match.model.surname+''+' (<i>'+match.model.address+'</i>)' | typeaheadHighlight:query"></span>

您不一定必须使用 i 标签。

Answer 2

您需要拆分结果元素来做到这一点：

<script type="text/ng-template" id="itemTpl.html">
 <a tabindex="-1">
    <span ng-bind-html-unsafe="match.model.firstname+' '+match.model.surname+''  |  typeaheadHighlight:query"></span>
    <span style="font-weight: bold;" ng-bind-html-unsafe="'(' + match.model.address +')' | typeaheadHighlight:query"></span>
 </a>
</script> 

祝你好运