AngularJS UI提前输入——对结果的一个属性进行样式化

AngularJS UI Typeahead - Styling one of the properties of the result

本文关键字：属性 一个 样式 UI 输入 结果 AngularJS      更新时间：2023-09-26

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

我有点卡住了。我需要将样式应用到结果上的属性之一。

这里有一个plunker

我的问题是，我真的不明白一个类如何应用到主管。属性，该属性显示在结果的末尾。

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>

这在你的plunker中为我工作:

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

你不一定要使用i标签

您需要拆分结果元素:

<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>
好运

相关文章：