Angular Material-关闭菜单时如何关闭/隐藏md-select？

Question

我在中使用md-menu-item元素md-menu。菜单由一个按钮激活-一切正常，并且都使用默认的angular js。

在每个md-menu-item我都有md-select输入。看起来像这样：

...

<md-menu-item>
    <md-input-container>
        <label>My Label</label>
        <md-select name="myName" aria-label="My Label" ng-model="mv.myModel" ng-change="vm.onChangeEvent(foo)">
            <md-option ng-value="value" ng-repeat="foo in vm.bar | orderBy: 'name'">
                {{foo.name}}
            </md-option>
        </md-select>
    </md-input-container>
</md-menu-item>

...

如果我通过单击按钮打开菜单-如果我什么也没有选择，然后单击<md-select>（屏幕上的任意位置），md-menu一切都会消失，一切都很好。

如果单击其中一个<md-select>元素，然后单击屏幕中的某个位置，则<md-menu>关闭，但仍可以看到该<md-select>元素。

有没有一种方法可以“嵌套”选择菜单项中的元素，以便在我关闭菜单项时也关闭所有子元素？

这是我所看到的Codepen示例。

感谢您的任何建议！

Answer 1

这里的问题在于menu和select背景，当单击时，它们用于关闭相应的元素。所以它是有角的材料。您可以更改z-index这些背景。默认值在文件中指定variables.scss（如您所见，菜单的背景位于选择的上方，因此您首先将其关闭）：

$z-index-menu: 100 !default;
$z-index-calendar-pane: 100 !default;
$z-index-select: 90 !default;

这是我看到的唯一快速修复（您可以在 CSS 中更改这些背景的 z-index）。