Bootstrap-UI Typeahead exibe mais de uma propriedade na lista de resultados?

Estou usando o typeahead do ui-bootstrap. Isso funciona shinymente! No entanto, eu estou querendo saber se é possível exibir várias propriedades ou até mesmo HTML na lista de resultados. Problema típico: a pesquisa retorna mais de um object com o mesmo valor. Por exemplo, busque por “graça incrível”, retorne [‘graça surpreendente’, ‘graça surpreendente’], onde um é o filme e o outro é a música. Eu gostaria que a lista de resultados fosse mais parecida com:

amazing grace | movie amazing grace | song 

… então o usuário sabe exatamente o que está selecionando. Melhor ainda seria um ícone ao lado do título. Em outras palavras, cada resultado na lista contém algum HTML. Qualquer um destes pode ser feito fora da checkbox?

A coisa sobre a diretiva typeahead de http://angular-ui.github.io/bootstrap/ é que tenta imitar a syntax usada pela diretiva select do AngularJS. Isso significa que todas as expressões usadas para selecionar um modelo para vincular e um label são expressões AngularJS . Isso, por sua vez, significa que você pode usar qualquer expressão do AngularJS para calcular o texto da sua etiqueta.

Por exemplo, para exibir o texto desejado, você pode escrever:

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

Desde que o seu modelo de dados se pareça com o seguinte:

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

Trabalhando plunk aqui: http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=preview

Escrever expressões complexas para um label no atributo typeahead pode ficar feio, mas nada impede que você mova a lógica de cálculo de label para uma function exposta em um escopo, ex .:

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

onde o label é uma function exposta em um escopo:

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

Outra plunk: http://plnkr.co/edit/ftKZ96UrVfyIg6Enp7Cy?p=preview

No que diz respeito à sua pergunta sobre icons, você pode incorporar HTML nas expressões de label, mas isso é horrível para escrever e manter. Felizmente, a diretiva typeahead permite que você forneça um modelo personalizado para o seu item correspondente, assim:

 typeahead-template-url="itemTpl.html" 

No modelo personalizado, você pode usar qualquer expressão ou diretiva AngularJS que desejar. Adicionar icons torna-se trivial com uma pequena ajuda da diretiva ngClass :

  

E o trabalho plunk: http://plnkr.co/edit/me20JzvukYbK0WGy6fn4?p=preview

Diretriz pouco bonita, não é?