I see a sub-menu working in the "menu bar" example - https://material.angularjs.org/latest/demo/menuBar
There are no examples of sub-menus for the actual menu component.
I looked at the menu bar example and it uses md-menu, so it should be supported in the regular menu, right? I tried it and it breaks the entire menu (top level also stops working).
I'm guessing that it's just not supported? I found this discussion, but I'm not sure what to make of it.
Check here, there are sub-menu in this example. version 1.0.5
<md-menu-item>
<md-menu style="padding:0px;">
<md-menu-item>
<!-- ACCOUNT SETTINGS -->
<md-button ng-click="$mdOpenMenu()">
<md-icon md-font-set="md">assignment_ind</md-icon>
Account Settings
</md-button>
</md-menu-item>
<!-- SUBMENU-->
<md-menu-content>
<!-- CHANGE PASSWORD -->
<md-menu-item>
<md-button>
<md-icon md-font-set="md">security</md-icon>
Change Pasword
</md-button>
</md-menu-item>
<!-- DELETE ACCOUNT -->
<md-menu-item>
<md-button>
<md-icon md-font-set="md">delete_forever</md-icon>
Delete Account
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-item>
Related
The menu content is partly hidden instead of positioning properly.
<md-menu>
<md-button ng-click="$mdMenu.open($event)">
<div layout="row"><div>Edit</div><md-icon md-menu-origin>more_vert</md-icon></div>
</md-button>
<md-menu-content>
<md-menu-item>
<md-button>Save</md-button>
</md-menu-item>
<md-menu-item>
<md-button>Delete</md-button>
</md-menu-item>
<md-menu-item>
<md-button>Print</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
Now that I see your view, the problem is not the code, the template is ok, the problem is that you are adding this menu in the bottom of the page, and not using the offset option to correct the position of it, try different values for the y axis.
<md-menu md-offset="0 -100">
I have an AngularJS 1.6/Typescript project in which I have a Material Design menu element. Inside the menu element I have a select with multiple options.
If I click open the menu and then click on the select and then outside the select element only the menu container is removed. Since the md-backdrop element for the menu has a higher z-index than the md-backdrop for the select element.
I would like to be able to remove both the menu and the select container with a single click.
https://codepen.io/anon/pen/ELOvJd
<md-menu>
<md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdMenu.open();">
qq
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button>
yy
</md-button>
</md-menu-item>
<md-menu-item>
<md-button>
zz
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-button>
xx
</md-button>
</md-menu-item>
<md-input-container>
<label>Status</label>
<md-select ng-model="ctrl.userState">
<md-option><em>None</em></md-option>
<md-option>
Something
</md-option>
<md-option>
Something
</md-option>
<md-option>
Something
</md-option>
<md-option>
Something
</md-option>
</md-select>
</md-input-container>
</md-menu-content>
</md-menu>
Is it required for you to use a select? Why not utilize a second menu?
Example:
https://codepen.io/anon/pen/LmXOOj
<div class="md-menu-demo menudemoBasicUsage" ng-controller="BasicDemoCtrl as ctrl" ng-cloak="" ng-app="MyApp">
<md-menu>
<md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdMenu.open();">
qq
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button>
yy
</md-button>
</md-menu-item>
<md-menu-item>
<md-button>
zz
</md-button>
</md-menu-item>
<md-menu-item>
<md-button>
xx
</md-button>
</md-menu-item layout="row">
<md-menu>
<md-button aria-label="Open interactions menu" class="md-icon-button" ng-click="$mdMenu.open();">
>>
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button>
aa
</md-button>
</md-menu-item>
<md-menu-item>
<md-button>
bb
</md-button>
</md-menu-item>
<md-menu-item>
<md-button>
cc
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-content>
</md-menu>
I've played around a bit and we can listen to the mdMenuClose emitter. And from that point we call the ``$mdSelect.hide()` function to hide the select box when the mdMenu is closed.
https://codepen.io/anon/pen/jxXbrX
$scope.$on('$mdMenuClose', function (event) {
$mdSelect.hide();
});
My menu is closing after I click on my toggleSharebutton. How can i prevent this. I use angularJS with Angular material
Here is my code:
<md-menu>
<md-button ng-click="$mdOpenMenu()">
</md-button>
<md-menu-content>
<md-menu-item>
<md-button ng-click="toggleShare()">
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
You can use md-prevent-menu-close attribute to stop menu from closing as suggested in offical doc. Here is how you write code
<md-menu>
<md-button ng-click="$mdOpenMenu()">
</md-button>
<md-menu-content>
<md-menu-item>
<md-button ng-click="toggleShare()" md-prevent-menu-close="md-prevent-menu-close">
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
Here is a working example of your desired result using this method.
http://codepen.io/next1/pen/aNadYR
The answer above should be the accepted answer, but you can also use ngMouseup instead of ngClick and it works just the same :)
<md-menu>
<md-button ng-click="$mdOpenMenu()">
</md-button>
<md-menu-content>
<md-menu-item>
<md-button ng-mouseup="toggleShare()">
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
I'm using Angular Material and md-menu. I can run a function by pressing the menu button, but not outside. How to execute a function by clicking outside the menu when the menu is open?
The code:
<md-menu>
<div ng-click="$mdOpenMenu($event);">
<div>
<md-icon md-svg-src="1.svg"></md-icon>
</div>
{{ items }}
</div>
<md-menu-content width="2">
<md-menu-item>
<md-button ng-click="funa()">item1</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="funb()">item2</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
When I click outside the menu, always closed and i can't run another action/function.
Thanks a lot!
I have added angular-material to my meanjs project and was playing with styling first elements. I also made sure every other styles were removed from that project.. so only default angular styles are being loaded.
Now, for example, I created a md-menu in a md-toolbar using this code here:
<md-menu md-position-mode="target-right target">
<md-button aria-label="Open profile actions" ng-click="openMenu($mdOpenMenu, $event)" md-menu-origin>
<img alt="{{authentication.user.displayName}}" class="header-profile-image" data-ng-src="{{authentication.user.profileImageURL}}"/>
<span data-ng-bind="authentication.user.displayName"></span>
</md-button>
<md-menu-content width="4">
<md-menu-item data-ui-sref-active="active">
<md-button data-ui-sref="settings.profile">
<ng-md-icon icon="account_circle"></ng-md-icon>
<span md-menu-align-target>Edit Profile</span>
</md-button>
</md-menu-item>
<md-menu-item data-ui-sref-active="active">
<md-button data-ui-sref="settings.picture">
<ng-md-icon icon="photo" md-menu-align-target></ng-md-icon>
Change Profile Picture
</md-button>
</md-menu-item>
<md-menu-item data-ui-sref-active="active" data-ng-show="authentication.user.provider === 'local'">
<md-button data-ui-sref="settings.password">
<ng-md-icon icon="lock" md-menu-align-target></ng-md-icon>
Change Password
</md-button>
</md-menu-item>
<md-menu-item data-ui-sref-active="active">
<md-button data-ui-sref="settings.accounts">
<ng-md-icon icon="share" md-menu-align-target></ng-md-icon>
Manage Social Accounts
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item data-ui-sref-active="active">
<md-button href="/api/auth/signout" target="_self">
<ng-md-icon icon="logout" md-menu-align-target></ng-md-icon>
Signout
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
However this results in a menu with mispositioned texts and icons, even if I delete the icons. They should be vertically centered like you can see here:
https://material.angularjs.org/HEAD/#/demo/material.components.menu
Same problem came up creating a menu icon like this:
<md-button aria-label="Open the sidebar" class="md-icon-button menu" ng-click="toggleSideNav()">
<ng-md-icon icon="menu" style="fill: #fff;" md-menu-align-target></ng-md-icon>
</md-button>
Which results in this here
However.. it's no problem for me to solve this with some css rules.. but I guess the problem must be somewhere else? anybody has an idea? I checked the angular-material documentation a thousand times and can't figure out what's wrong.
thanks!
It's because you're mixing Angular Material with Angular Material Icons (ng-md-icon), two different projects, but the ng-md-icon guys have patched their library to run alongside Angular Material, but you have to use the Angular Material directive md-icon like so:
Instead of:
<ng-md-icon icon="account_circle"></ng-md-icon>
You would use:
<md-icon ng-md-icon icon="account_circle"></md-icon>