AngularJS UI Typeahead - 設計結果的屬性

我一直在使用this thread來指導我使用夢幻般的typeahead指令。AngularJS UI Typeahead - 設計結果的屬性

但是我有點卡住了。我需要將樣式應用於結果中的其中一個屬性。

我有一個plunkerhere.

我的問題是，我真的不明白一類是如何被應用到在結果的末尾顯示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>

來源

2014-07-15 JimmyBob

plunkr中的typeahead模板在哪裏？ –

我很抱歉，我與錯誤的重擊者聯繫在一起。這現在已更新。謝謝。 – JimmyBob

這在plunker工作對我來說：

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

你不一定要使用我的標籤。

來源

2014-07-15 14:39:52

謝謝你。一旦選擇它，我將如何將其擴展到輸入值？ – JimmyBob

沒有意識到這是不可能的。謝謝。 – JimmyBob

您需要拆分效果的元素做到這一點：

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

好運

來源

2014-07-15 14:36:24

AngularJS UI Typeahead - 設計結果的屬性

回答

相關問題