md-select在md-tab中有一個搜索輸入

Question

我在md-tab指令中嵌套帶有搜索輸入的md-select時出現問題。

有兩個問題：

1. 一旦選擇框擴展，一個具有向上滾動查看搜索輸入
2. 搜索輸入實際上並沒有接受任何文本

我作出codepen來更好地說明我的意思：

<md-tab label="Search does not work here"> 
    <md-input-container class="md-block" flex> 
     <label>Vegetables</label> 
     <md-select 
     multiple 
     ng-model="selectedVegetables" 
     md-on-close="clearSearchTerm()" 
     data-md-container-class="selectdemoSelectHeader"> 
     <md-select-header class="demo-select-header"> 
      <input 
      type="search" 
      ng-model="searchTerm" 
      placeholder="Search.." 
      class="demo-header-searchbox md-text"> 
     </md-select-header> 
     <md-optgroup label="vegetables"> 
      <md-option 
      ng-value="vegetable" 
      ng-repeat="vegetable in vegetables | filter:searchTerm"> 
       {{vegetable}} 
      </md-option> 
     </md-optgroup> 
     </md-select> 
    </md-input-container> 
    </md-tab> 

Angular.js 1.5.3 角材料1.0.9

感謝

Answer 1

我有完全相同的問題，我設法通過執行來解決它遵循

<md-select-header class="demo-select-header"> 
<input 
ng-model="formData.searchTerm" 
type="search" 
placeholder="Search for a student.." 
aria-label 
class="demo-header-searchbox _md-text" 
ng-keydown="vm.updateSearch($event)" 
> 
</md-select-header> 

，然後在我的控制器我定義的字符代碼的數組should'nt被顯示在搜索文本

vm.bannedCodes = [ 8,9,13,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,91,92,,106,107,109,110,111,112,113,114,115,116,117,118,119,120,121,121,123,144,145]; 

和我updateSearch功能看起來像這樣

function updateSearch(e){ 
    e.stopPropagation(); 
    if(vm.bannedCodes.indexOf(e.keyCode) < 0){ 
    if(e.keyCode == 8){ 
     $scope.formData.searchTerm =  $scope.formData.searchTerm.substring(1 , $scope.formData.searchTerm.length -1); 
    } 
    } 

} 

Answer 2

我也有這個問題，但通過遵循這個解決方案解決了它。 這是我的HTML代碼

<md-input-container> 
    <label></label> 
    <md-select ng-model="selectedVegetables"> 
     <md-select-header> 
      <input ng-model="searchTerm" class="_md-text" onkeydown="mdSelectOnKeyDownOverride(event)"> 
    </md-select-header> 
    <md-optgroup> 
     <md-option></md-option> 
    </md-optgroup> 
    </md-select> 
</md-input-container>