Javascript 角度材质：md选择标题内部选项卡不工作

关于这个问题，我遇到了麻烦

我正在使用：

角材料1.1.0
角度1.5.5

当我将md select放在md选项卡中时，问题出现了，然后md select标题（搜索框）不再工作。我不太擅长解释，所以请看下面的代码笔

当我这样做的时候，它就起作用了

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

---

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

之所以这样做，是因为

元素正在将

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

//MdSelectTemplate.html
//MdSelectController.js
vm.filterQuery=''；
vm.items=[]；
vm.onSearchChange=函数（事件）{
event.stopPropagation（）；
}

荣誉

这是官方的线索

添加

ng keydown=“$event.stopPropagation（）”

参考这个例子

.selectdemoSelectHeader.DemoHeader搜索框{
边界：无；
大纲：无；
身高：100%；
宽度：100%；
填充：0；
}
.选择演示选择标题。演示选择标题{
长方体阴影：0 1px 0 rgba（0,0,0,0.1）、0 0 rgba（0,0,0,0.14）、0 0 rgba（0,0,0,0.12）；
左侧填充：10.667px；
高度：48px；
光标：指针；
位置：相对位置；
显示器：flex；
对齐项目：居中；
宽度：自动；
}
。选择DemoSelectHeader md内容。\u md{
最大高度：240px；
}
蔬菜
{{蔬菜}
/**
*您必须包含对“ngMaterial”的依赖关系
*/
有棱角的
.module（'蔬菜'，['ngMaterial']））
.controller（'蔬菜'，函数（$scope，$element）{
$scope.vegets=[
“玉米”，
“洋葱”，
“甘蓝”，
"芝麻菜",，
“豌豆”，
“西葫芦”
];
$scope.searchTerm；
$scope.clearSearchTerm=函数（）{
$scope.searchTerm=''；
};
//md select指令为某些快速选择读取键下事件
//逻辑。因为我们这里有一个搜索输入，所以我们不需要那个逻辑。
$element.find（'input'）。on（'keydown'，函数（ev）{
ev.stopPropagation（）；
});
});

我在尝试将

md select

放入

md芯片模板

时遇到类似问题。我猜

md select header

在嵌套时会有多大程度的损坏