Angular Material - How can I close/hide my md-select when I close my menu?

问题

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.

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>

...

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?

Here is a codepen example of what I am seeing.

Thank you for any suggestions!

回答1:

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

回答2:

The problem here is with menu and select backdrops which are used to close corresponding elements, when clicked out. So it's angular material thing. You can change z-index of these backdrops. Defaults are specified in variables.scss file (as you can see menu's backdrop is above select's, so you close it first):

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

That's the only quick fix I see (you can change z-index for these backdrops just in your css).

来源：https://stackoverflow.com/questions/39922548/angular-material-how-can-i-close-hide-my-md-select-when-i-close-my-menu

标签

angularjs

angular-material