AngularJs Creating Context Menu With SubMenu

Question

I want to create a context menu in directive with angularjs, I can create a menu but can not create with submenu. I mean, open submenu on hover.

Sample Fiddle: sample contextmenu

My Controller:

$scope.menuOptions = [
        ['New User', function () {
           console.log("New User");
        }],
        ['Delete', function () {
           console.log("Delete");
        }]
    ]; 

This fiddle is a very good,only I want to add submenu to this context menu. How can I create submenus based on this example?

Answer 1

The first issue you have here is, that you are using Bootstrap and Bootstrap doesn't support Submenus (anymore) out of the box. But you can extend the functionality by adding some style sheets. The second issue is that you need to extend the renderContextMenu function to support nested arrays, currently it will only support simple arrays.

This is my attempt to solve your problem: JSFIDDLE

Still a bit hacky but would work. This is what I changed:

• Changed the menuOptions, added a new example Item which doesn't have a function in second place but another array of items
• Extracted the functionality of the angular.forEach... method which is processing through the items to a new method buildMenuItem because i needed it for reuse to process the sub items
• Updated the routine with a else if(item[1] instanceof Array) check to detect a sub menu, this is where the sub menu is added, using recursion to add the sub menu items (you could basically have multiple levels, not just one)
• Added style sheets from the Link above to support sub menu styling

Answer 2

There is a similar question, Bootstrap Context Menu ,alternatively you can use this AngularJS Dropdown Multiselect