Aggiungi piè di pagina con collegamento nell'elenco di suggerimenti nel materiale a completamento automatico angolare

Question

Sto costruendo un sito Web utilizzando il (impressionante aspetto) Angular Material. Ora sto usando il Autocomplete Component e vorrei aggiungere un footer fisso all'elenco dei suggerimenti. Qualcosa di simile si può vedere nell'immagine qui sotto, in cui Pinterest aggiunge twitter e google + al piè di pagina dei suggerimenti di ricerca degli utenti:

Ho provato ad aggiungere un piè di pagina nel componente md-completamento automatico html:

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

Purtroppo questo non funziona, non viene visualizzato nulla. Here è l'esempio di lavoro del completamento automatico del materiale.

Qualcuno sa come posso aggiungere un footer fisso ai suggerimenti del completamento automatico del materiale angolare? Tutti i suggerimenti sono ben accetti!

Answer 1

Non penso che sia possibile aggiungere un modello aggiuntivo a md-autocomplete. Credo che md-autocomplete ripulire la lista di selezione, e la sua ricostruzione ripetendo md-item-template

Così, è meglio aggiungere dati supplementari alla fine della vostra ricerca.

Ecco l'esempio. http://codepen.io/anon/pen/xGyLXP?editors=101

parti del controller

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

Html parte

<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 ----------- Per, stile e contenuti diversi, è possibile utilizzare ng-class, ng-if, di ng-show saggiamente poiché il contenuto di md-item-template è stato compilato.

Ho aggiornato la risposta di cui sopra per quelli fissi per avere uno stile diverso.