Что нужно знать о директиве typeahead из http://angular-ui.github.io/bootstrap/, так это то, что пытается имитировать синтаксис, используемый директивой select из 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
Довольно изящная маленькая директива, не так ли?
person
pkozlowski.opensource
schedule
15.08.2013
