Подтвердить что ты не робот

Bootstrap-UI Typeahead отображает более одного свойства в списке результатов?

Я использую ui-bootstrap typeahead. Он работает блестяще! Однако мне интересно, можно ли отображать в списке результатов несколько свойств или даже HTML. Типичная проблема: поиск возвращает более одного объекта с одинаковым значением. Например, поиск "удивительной благодати" ( "потрясающая грация", "потрясающая грация" ), где один фильм, а другой - песня. Я бы хотел, чтобы список результатов больше напоминал:

amazing grace | movie
amazing grace | song

... поэтому пользователь точно знает, что они выбирают. Еще лучше будет значок рядом с названием. Другими словами, каждый результат в списке содержит некоторый HTML. Можно ли это сделать из коробки?

Ответ 1

Вещь в директиве typeahead http://angular-ui.github.io/bootstrap/ заключается в том, что она пытается имитировать синтаксис, используемый выберите директиву от AngularJS. Это означает, что все выражения, используемые для выбора модели для привязки и метки, являются выражениями AngularJS. Это по очереди означает, что вы можете использовать любое выражение AngularJS для вычисления текста вашей метки.

Например, чтобы отобразить нужный текст, вы можете написать:

typeahead="item as item.title + ' (' + item.type + ')' for item in titles | filter:{title:$viewValue}"

При условии, что ваша модель данных выглядит следующим образом:

$scope.titles = [
    {title: 'Amazing Grace', type: 'movie'},
    {title: 'Amazing Grace', type: 'song'}
  ];

Рабочий плунж здесь: http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=preview

Написание сложных выражений для метки в атрибуте typeahead может оказаться уродливым, но ничто не мешает вам переместить логику вычисления меток в функцию, открытую в области, например:

typeahead="item as label(item) for item in titles | filter:{title:$viewValue}"

где label - это функция, открытая в области видимости:

$scope.label = function(item) {
    return item.title + ' (' + item.type + ')';
  };

Другой сюжет: http://plnkr.co/edit/ftKZ96UrVfyIg6Enp7Cy?p=preview

Насколько ваш вопрос касается значков - вы можете вставлять HTML в выражения ярлыков, но это становится ужасно писать и поддерживать. К счастью, директива typeahead позволяет вам создать собственный шаблон для вашего согласованного элемента, например:

typeahead-template-url="itemTpl.html"

В пользовательском шаблоне вы можете использовать любые выражения или директиву AngularJS, которые вы хотели бы. Добавление значков становится тривиальным с небольшой помощью директивы ngClass:

<script type="text/ng-template" id="itemTpl.html">
   <a tabindex="-1">
      <i ng-class="'icon-'+match.model.type"></i>
      <span  ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span>
   </a>
</script>

И рабочий план: http://plnkr.co/edit/me20JzvukYbK0WGy6fn4?p=preview

Довольно аккуратная маленькая директива, не так ли?