AngularJS UI Typeahead — стилизация одного из свойств результата

Я использовал эту тему чтобы помочь мне использовать фантастическую директиву 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>

javascript angularjs angularjs-directive angular-ui-typeahead
person JimmyBob    schedule 15.07.2014    source источник
comment
Где находится шаблон typeahead в plunkr?   -  person Ben Diamant    schedule 15.07.2014
comment
Я извиняюсь, я связался с неправильным плунжером. Теперь это обновлено. Спасибо.   -  person JimmyBob    schedule 15.07.2014

Ответы (2)


arrow_upward
1
arrow_downward

Это сработало для меня в вашем плункере:

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

Вам не обязательно использовать тег i.

person Andy Gaskell    schedule 15.07.2014
comment
Спасибо за это. Как бы я расширил это до входного значения после его выбора? - person JimmyBob; 16.07.2014
comment
Неважно, только что понял, что это невозможно. Спасибо. - person JimmyBob; 16.07.2014

arrow_upward
0
arrow_downward

Для этого вам нужно разделить элементы результатов:

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

Удачи

person Ben Diamant    schedule 15.07.2014