Bootstrap-UI TypeAhead wyświetla więcej niż jedną właściwość na liście wyników?

Question

Używam polecenia typu ui-bootstrap. Działa wspaniale! Zastanawiam się jednak, czy możliwe jest wyświetlenie wielu właściwości lub nawet HTML na liście wyników. Typowy problem: wyszukiwanie zwraca więcej niż jeden obiekt o tej samej wartości. Np. Poszukiwanie "niesamowitej łaski" zwraca ["niesamowita gracja", "niesamowita gracja"] gdzie jeden jest filmem, a drugi jest piosenką. Chciałbym, aby lista wyników była bardziej podobna:

amazing grace | movie 
amazing grace | song 

... więc użytkownik wie dokładnie, co wybiera. Jeszcze lepiej będzie ikona obok tytułu. Innymi słowy, każdy wynik na liście zawiera trochę kodu HTML. Czy którekolwiek z nich może być wykonane po wyjęciu z pudełka?

Answer 1

Rzeczą, którą można znaleźć w odniesieniu do dyrektywy typeahead z http://angular-ui.github.io/bootstrap/, jest próba naśladowania składni używanej przez select directive z AngularJS. Oznacza to, że wszystkie wyrażenia użyte do wyboru modelu wiążącego i etykiety to AngularJS expressions. To z kolei oznacza, że ​​możesz użyć dowolnego wyrażenia AngularJS, aby obliczyć tekst swojej etykiety.

Na przykład, aby wyświetlić żądany tekst można napisać:

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

Pod warunkiem, że dany model danych wygląda następująco:

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

robocza rzucać tutaj: http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=preview

Pisanie złożone wyrażenia dla etykiety w atrybucie typeahead mogą być brzydkie, ale nic nie powstrzyma cię przed przeniesieniem etykiety logika kalkulacji do funkcji narażone na zakres, np .:

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

gdzie label jest funkcją narażony na zakres:

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

Innym upadać: http://plnkr.co/edit/ftKZ96UrVfyIg6Enp7Cy?p=preview

O ile twój pytanie dotyczące ikon - możesz osadzić kod HTML w wyrażeniach etykiet, ale jest to okropne w pisaniu i utrzymywaniu. Na szczęście dyrektywa wpisywanie znaków z wyprzedzeniem pozwala na dostarczenie własnego szablonu dla dopasowanej pozycji, tak jak poniżej:

typeahead-template-url="itemTpl.html" 

W szablonu niestandardowego można użyć dowolnego wyrażenia lub angularjs dyrektywą chcesz. Dodawanie ikon staje się trywialne z niewielką pomocą dyrektywy 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> 

I upadać robocze: http://plnkr.co/edit/me20JzvukYbK0WGy6fn4?p=preview

Całkiem zgrabny mały dyrektywa, prawda?