Angular Material - 当我关闭菜单时,如何关闭/隐藏我的md-select?

时间:2016-10-07 17:03:26

标签: angularjs angular-material

我在md-menu-item中使用md-menu个元素。菜单由一个按钮激活 - 一切正常,所有都使用默认的角度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就会消失,就像它应该&amp;一切都很好。

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

有没有办法在菜单项中“嵌套”选择元素,这样当我关闭菜单项时,所有子元素也会关闭?

Here is a codepen example我所看到的。

感谢您的任何建议!

2 个答案:

答案 0 :(得分:2)

在框外单击时隐藏md-select。我正在使用'$mdSelect.hide()'来关闭md-select下拉菜单。我只是在主控制器中放了3行。

    $(document).bind('click', function (event) {
        $mdSelect.hide();
    });

答案 1 :(得分:1)

此处的问题是menuselect背景,用于在点击时关闭相应的元素。所以它是有角度的材料。您可以更改这些背景的z-index。默认值在variables.scss文件中指定(因为您可以看到菜单的背景位于选择的上方,因此您先关闭它):

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

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