Bootstrap-UI Typeahead mehr als eine Eigenschaft in der Ergebnisliste anzeigen?

Question

Ich benutze UI-Bootstrap Typahead. Es funktioniert hervorragend! Ich frage mich jedoch, ob es möglich ist, mehrere Eigenschaften oder sogar HTML in der Ergebnisliste anzuzeigen. Typisches Problem: Die Suche gibt mehr als ein Objekt mit demselben Wert zurück. ZB Suche nach 'Amazing Grace' Return ['erstaunliche Anmut', 'erstaunliche Anmut'] wo einer der Film ist und einer der Song ist. Ich möchte, dass die Ergebnisliste mehr wie folgt aussieht:

amazing grace | movie 
amazing grace | song 

... damit der Benutzer genau weiß, was er auswählt. Noch besser wäre eine Ikone neben dem Titel. Mit anderen Worten, jedes Ergebnis in der Liste enthält etwas HTML. Kann beides getan werden?

Answer 1

Die Sache über die typeahead Richtlinie von http://angular-ui.github.io/bootstrap/ NTICE ist, die Syntax von den select directive von AngularJS verwendet zu imitieren versucht. Dies bedeutet, dass alle Ausdrücke, die für die Auswahl eines zu bindenden Modells und einer Beschriftung verwendet werden, AngularJS expressions sind. Dies wiederum bedeutet, dass Sie mit jedem beliebigen AngularJS-Ausdruck den Text Ihres Etiketts berechnen können.

Zum Beispiel Ihren gewünschten Text angezeigt werden könnten Sie schreiben:

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

Vorausgesetzt, dass Ihr Datenmodell sieht wie folgt:

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

Arbeiten hier zupfen: http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=preview

Schreiben komplexe Ausdrücke für ein Label im typeahead-Attribut können hässlich werden, aber nichts hindert Sie daran, das Label zu verschieben Berechnungslogik auf eine Funktion auf einem Umfang ausgesetzt, ex .:

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

wo die label eine Funktion auf einem Umfang ausgesetzt ist:

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

andere zupfen: http://plnkr.co/edit/ftKZ96UrVfyIg6Enp7Cy?p=preview

Soweit Ihre Frage bezüglich der Symbole gehen - Sie könnten HTML in die Label-Ausdrücke einbetten, aber dies wird schrecklich zu schreiben und zu pflegen. Glücklicherweise ist die typeahead-Richtlinie können Sie eine benutzerdefinierte Vorlage für Ihre angepassten Element zur Verfügung zu stellen, etwa so:

typeahead-template-url="itemTpl.html" 

In der benutzerdefinierten Vorlage Sie Ausdrücke oder AngularJS verwenden können Direktive Sie möchten. Hinzufügen von Symbolen mit einer wenig Hilfe von der ngClass Richtlinie trivial:

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

und das Arbeits zupfen: http://plnkr.co/edit/me20JzvukYbK0WGy6fn4?p=preview

Recht ordentlich wenig Richtlinie ist es nicht?