Fußzeile mit Link in der Liste der Vorschläge in Autocomplete Material Winkel hinzufügen

Question

Ich baue eine Website mit der (genial aussehende) Angular Material. Ich benutze jetzt die Autocomplete Component und möchte eine feste Fußzeile zu der Liste der Vorschläge hinzufügen. So etwas kann man unten im Bild sehen, in denen Pinterest Twitter und Google + in die Fußzeile der Benutzer Suchvorschläge ergänzt:

Ich habe versucht, eine Fußzeile in der HTML-md-Autocomplete-Komponente hinzuzufügen:

<md-content layout-padding="" layout="column"> 
    <form ng-submit="$event.preventDefault()"> 
     <md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.name" md-min-length="0" placeholder="e-mail of naam " md-menu-class="autocomplete-custom-template"> 
      <md-item-template> 
       <span class="item-title"> 
        <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon> 
        <span> {{item.name}} </span> 
       </span> 
      </md-item-template> 
      <md-item-template> 
       <footer><a href="">Some link</a></footer> 
      </md-item-template> 
     </md-autocomplete> 
    </form> 
</md-content> 

Leider funktioniert das nicht, nichts wird angezeigt. Here ist das Arbeitsbeispiel der Material Autocomplete.

Weiß jemand, wie ich eine feste Fußzeile zu den Vorschlägen der automatischen Vervollständigung des Winkelmaterials hinzufügen kann? Alle Tipps sind willkommen!

Answer 1

Ich glaube nicht, dass Sie zusätzliche Vorlage zu md-autocomplete hinzufügen können. Ich glaube, dass md-autocomplete die Auswahlliste aufzuräumen und den Wiederaufbau durch md-item-template

So wiederholen, ist es besser, zusätzliche Daten am Ende Ihrer Suche hinzuzufügen.

Hier ist das Beispiel. http://codepen.io/anon/pen/xGyLXP?editors=101

Controller-Teile

self.fixedOnes = [ 
    {'name'  : 'FIXED1', type: 'fixed'}, 
    {'name'  : 'FIXED2', type: 'fixed'}, 
    {'name'  : 'FIXED3', type: 'fixed'} 
]; 

Html Teil

<md-autocomplete ... 
    md-items="item in (ctrl.querySearch(ctrl.searchText).concat(ctrl.fixedOnes))" ... > 
    <md-item-template> 
     <div ng-class="{fixed:item.type=='fixed'}"> 
     <span> {{item.name}} </span> 
     </div> 
    </md-item-template> 
    </md-autocomplete> 

------------- ------------ EDIT -----------
Für verschiedene Stile und Inhalte können Sie ng-class, ng-if, von ng-show weise verwenden, da der Inhalt von md-item-template kompiliert wird.

Ich habe die obige Antwort für feste aktualisiert, um unterschiedliche Stile zu haben.