角度材料：选项卡内的 md-select-header 不起作用答案

【问题标题】：Angular Material: md-select-header inside tab not working角度材料：选项卡内的 md-select-header 不起作用
【发布时间】：2016-08-10 23:02:39
【问题描述】：

我遇到了这个问题。

我正在使用：

Angular 材质 1.1.0
角 1.5.5

当我将 md-select 放入 md-tabs 然后 md-select-header(search box) 不再起作用时，就会出现问题。我不太擅长解释事情，所以请看下面的代码笔。

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>

如果您需要其他信息，请询问我。谢谢。

【问题讨论】：

我在尝试将md-select 放入md-chip-template 时遇到了类似的问题。我猜md-select-header 在嵌套时有些破损

标签： javascript css angularjs angular-material

【解决方案1】：

这是因为<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

【讨论】：

【解决方案2】：

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

【讨论】：