有沒有辦法將自定義按鈕添加到角度材質自動完成？

我目前正在使用一個自動完成的輸入組件，它工作正常，但缺乏某種功能。該組件通過查詢獲取所有需要的數據，只要加載該頁面，就會觸發該查詢並選擇預定義的默認條目。然而，總是有至少10個條目可用，但爲了向他們顯示，用戶有必要清除當前選擇自動完成的項目。一旦選定的項目被清除，組件將顯示所有條目並將其過濾爲與用戶的輸入相對應。有沒有辦法創建一個自動完成組件的自定義版本，我可以添加一個按鈕來顯示所有條目，而不管當前選擇的項目是什麼？有沒有辦法將自定義按鈕添加到角度材質自動完成？

來源

2016-07-06 TheLax

此問題的原因不是缺乏功能，而是關於在此組件中使用浮動標籤的問題。我在這個問題上發現了一些非常有用的信息：git：https://github.com/angular/material/issues/2727

有一個解決方案是由一個名爲nobol的用戶給出的，它可以解決我的問題。通過以清除自動完成場的問題可以解決使用指令：

HTML：

<md-autocomplete md-floating-label="LABEL" 
      md-selected-item="$ctrl.model" md-search-text="$ctrl.searchText" 
      md-selected-item-change="$ctrl.itemChanged($ctrl.model)" 
      md-items="item in $ctrl.items" clear-autocomplete 
      md-autoselect="true" required>

指令：

angular 
    .module('yourModule') 
    .directive('clearAutocomplete', clearAutocomplete); 
function clearAutocomplete($parse) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     const button = angular.element('<md-button>').addClass('clear-autocomplete'); 
     button.append('<i class="material-icons">clear</i>'); 
     element.append(button); 
     let searchTextModel = $parse(attrs.mdSearchText); 
     scope.$watch(searchTextModel, function(searchText) { 
     if (searchText && searchText !== '' && searchText !== null) { 
      button.addClass('visible'); 
     } else { 
      button.removeClass('visible'); 
     } 
     }); 
     button.on('click', function() { 
     searchTextModel.assign(scope, undefined); 
     }); 
    } 
    } 
}

這解決了我的問題，所以THX在github上註冊！

來源

2016-07-12 11:12:45 TheLax

有沒有辦法將自定義按鈕添加到角度材質自動完成？

回答

相關問題