Otomatik tamamlama malzemesindeki öneri listesinde bağlantı içeren altbilgi ekle

Question

(harika görünümlü) Angular Material'u kullanarak bir web sitesi yapıyorum. Şimdi Autocomplete Component kullanıyorum ve öneriler listesine sabit bir altbilgi eklemek istiyorum.

ben html md-otomatik tamamlama bileşeninde bir altbilgi eklemek çalıştı: sizin gibi bir şey Pinterest kullanıcı arama önerileri altbilgisine Twitter ve Google + ekler ettiği aşağıdaki resimde de görüldüğü

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

Ne yazık ki bu işe yaramıyor, hiçbir şey görüntülenmiyor. Here, Malzeme Otomatik Tamamlama'nın çalışma örneğidir.

Açısal Malzeme Otomatik Tamamlama'nın önerilerine nasıl sabit altbilgi ekleyebileceğimi bilen var mı? Tüm ipuçları bekliyoruz!

Answer 1

md-autocomplete'a ek şablon ekleyebileceğinizi düşünmüyorum. Ben md-autocomplete seçim listesini temizlemek inanıyoruz ve Böylece

md-item-template tekrarlayarak onu yeniden, bu aramanın sonunda ek veri eklemek daha iyidir.

İşte örnek. http://codepen.io/anon/pen/xGyLXP?editors=101

Kontrol parçaları

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

HTML parçası

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

------------- DÜZENLEME ------------ -----------
Farklı stil ve içerikler için, md-item-template'un içeriği derlendiğinden ng-class, ng-if, ng-show öğelerini akıllıca kullanabilirsiniz.

Yukarıdaki yanıtı, farklı stilleri olması için sabit olanlar için güncelledim.