angularjs - 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 Angular Material 1.0.9

谢谢

Answer 1

我也遇到过这个问题，但是按照这个解决方案解决了。这是我的 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>