如何在角度材質自動填充結束時有鏈接？

Question

我想在角度材質自動完成的末尾有一個鏈接。我需要鏈接始終可見。我通過創建一個指令來找到一種解決方法，它可以劫持「md-not-found」元素並始終顯示它。這裏是什麼樣子的例子：

https://plnkr.co/edit/5tfjYfrT59xx47k3Idke?p=preview

在第一焦點，它看起來就像我想要實現的。所有結果後都會顯示「創建用戶」鏈接。然後在搜索後，讓我們說「a」，自動完成結果框縮小到1個元素，永遠不會回到完整的高度。

我該如何解決這個問題？還是有另一種方法來做我想做的事情？

請記住，這僅僅是一個例子，我並不是真的想要像這樣創建用戶。

非常感謝。

這裏的指令：

(function() { 
    'use strict'; 

    angular.module('app').directive('notFoundAlwaysVisible', notFoundAlwaysVisible) 

    notFoundAlwaysVisible.$inject = ['$rootScope']; 

    function notFoundAlwaysVisible($rootScope) { 
     return { 
      restrict: 'A', 
      require: '^mdAutocomplete',    
      replace: true, 
      template: '', 
      link: function (scope, element, attrs, parentCtrl) { 
       parentCtrl.notFoundVisible = function() { return true; } 
       return ''; 
      } 
     } 
    } 
})(); 

這是我與它的新的指令自動完成的元素：

<md-autocomplete md-no-cache="true" 
        not-found-always-visible 
        md-selected-item="ctrl.item" 
        md-items="item in ctrl.querySearch(ctrl.searchText)" 
        md-search-text="ctrl.searchText" 
        md-item-text="item.Name" 
        md-min-length="0" 
        md-floating-label="Username" 
        md-select-on-match="true" 
        md-match-case-insensitive="true"> 
     <md-item-template> 
     <div> 
      <span md-highlight-text="ctrl.searchText">{{ item.Name }}</span> 
     </div> 
     </md-item-template> 
     <md-not-found> 
     <a href="#">Create User {{ ctrl.searchText }}</a> 
     </md-not-found> 
    </md-autocomplete> 

Answer 1

看看this幫助。您可以在結果的末尾添加鏈接，併爲該鏈接製作自己的樣式表。

<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).concat(ctrl.footerOption))" 
     md-item-text="item.display" md-min-length="0" placeholder="What is your favorite US state?" md-menu-class="autocomplete-custom-template"> 
     <md-item-template> 
     <div ng-class="{fixed:item.isFooter}"> 
      <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span> 
      </div> 
     </md-item-template> 
     <md-not-found> 
      No states matching "{{ctrl.searchText}}" were found. 
      <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a> 
     </md-not-found> 
     </md-autocomplete> 

您可以跟蹤這樣的頁腳，

function selectedItemChange(item) { 
     if (item) { 
     if (item.isFooter) 
      $log.info('footer selected, creating a new' + JSON.stringify(item));   
     else   
      $log.info('Item changed to ' + JSON.stringify(item));   
     } 
    }