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

问题描述

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

I am using md-menu-item elements in my md-menu. The menu is activated by a button - all is working fine and all uses default angular js.

在每个 md-menu-item 我有 md-select 输入.它看起来像这样:

Within each md-menu-item I have md-select inputs. It looks like this:

...

<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像它应该的那样消失&一切都很好.

If I open the menu via clicking the button - If I choose nothing and I click off of the <md-select> (anywhere on screen) the md-menu goes away like it should & all is well.

如果我点击 元素之一，然后点击屏幕上的某个地方， 关闭，但我仍然可以看到 元素.

If I click into one of the <md-select> elements, then click somewhere in the screen, the <md-menu> closes, but I can still see the <md-select> element.

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

Is there a way to "nest" select elements within a menu item so that when I close the menu item, all child elements also close?

这是我所看到的代码笔示例.

感谢您的任何建议！

推荐答案

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

To hide md-select when you click outside the box . I am using '$mdSelect.hide()' to close md-select dropdown menu. I just put following 3 lines in my main controller.

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

这篇关于Angular Material - 关闭菜单时如何关闭/隐藏我的 md-select?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！