angularjs – md-select,在md-tab中有搜索输入

发布时间：2020-12-17 17:46:15 所属栏目：安全来源：网络整理

导读：在使用md-tab指令内的搜索输入嵌套md-select时遇到问题. 有两个问题：选择框展开后,必须向上滚动才能查看搜索输入搜索输入实际上不接受任何文本我做了一个codepen以更好地说明我的意思： md-tab label="Search does not work here" md-input-container cl

在使用md-tab指令内的搜索输入嵌套md-select时遇到问题.

有两个问题：

>选择框展开后,必须向上滚动才能查看搜索输入
>搜索输入实际上不接受任何文本

我做了一个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

谢谢

解决方法

我有完全相同的问题,我设法通过以下方式解决它

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

然后在我的控制器中我定义了一个不应该在搜索文本中显示的字符代码数组

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,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);
    }
  }

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!