Angular Material:md选择选项卡内部的页眉不起作用

Angular Material: md-select-header inside tab not working

本文关键字：内部 不起作用 选项 Material md 选择 Angular      更新时间：2023-09-26

我在这个问题上遇到了麻烦。

我正在使用：

角材料1.1.0
角度1.5.5

当我将md-select放入md选项卡中时，就会出现问题，然后md-select标头（搜索框）将不再工作。我真的不擅长解释事情，所以只看下面的代码笔。

http://codepen.io/aldesabido/pen/GZGRBR

当我这样做的时候，它是有效的。

<md-select multiple="">
  <md-select-header>
    <input type="search">
  </md-select-header>
  <md-optgroup label="vegetables">
    <md-option></md-option>
  </md-optgroup>
</md-select>

但当我这样做的时候就不会了。

<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="Vegetable Tabs">
    <md-subheader class="subheader">
        <md-select multiple="">
            <md-select-header>
                <input type="search">
            </md-select-header>
            <md-optgroup label="vegetables">
                <md-option></md-option>
            </md-optgroup>
        </md-select>
    </md-subheader>
</md-tab>

请问我是否需要其他信息。谢谢

原因是<input>元素正在将keydown事件传播到md-select，默认情况下，md select将拾取与字符匹配的菜单项。

通过将事件处理程序绑定到输入并停止事件传播就可以了。

// MdSelectTemplate.html
<div ng-controller="MdSelectController as vm">
    <md-select>
      <md-input-container>
        <input ng-model="vm.filterQuery" ng-keydown="vm.onSearchChange($event)">
      </md-input-container>
      <md-option ng-repeat="item in vm.items track by item.id" ng-value="item.id">
    </md-select>
</div>
// MdSelectController.js
vm.filterQuery = '';
vm.items = [];
vm.onSearchChange = function(event) {
  event.stopPropagation();  
}

感谢@dmaslov

这是官方的线索https://github.com/angular/material/issues/4239

添加ng-keydown="$event.stopPropagation()"

参考这个例子

<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css">
  <style>
    .selectdemoSelectHeader .demo-header-searchbox {
      border: none;
      outline: none;
      height: 100%;
      width: 100%;
      padding: 0;
    }
    .selectdemoSelectHeader .demo-select-header {
      box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12);
      padding-left: 10.667px;
      height: 48px;
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: center;
      width: auto;
    }
    .selectdemoSelectHeader md-content._md {
      max-height: 240px;
    }
  </style>
</head>
<body ng-app="Vegetables" ng-cloak>
  <div ng-controller="vegetables">
    <md-tabs>
      <md-tab label="Plase Search ">
        <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" ng-keydown="$event.stopPropagation()">
            </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>
    </md-tabs>
  </div>
  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
  <!-- Angular Material Library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script>
  <!-- Your application bootstrap  -->
  <script type="text/javascript">
    /**
     * You must include the dependency on 'ngMaterial'
     */
    angular
      .module('Vegetables', ['ngMaterial'])
      .controller('vegetables', function($scope, $element) {
        $scope.vegetables = [
          'Corn',
          'Onions',
          'Kale',
          'Arugula',
          'Peas',
          'Zucchini'
        ];
        $scope.searchTerm;
        $scope.clearSearchTerm = function() {
          $scope.searchTerm = '';
        };
        // The md-select directive eats keydown events for some quick select
        // logic. Since we have a search input here, we don't need that logic.
        $element.find('input').on('keydown', function(ev) {
          ev.stopPropagation();
        });
      });
  </script>
</body>
</html>

相关文章：