1

image

Can any one provide me reference to angularjs dropdown with action links as shown in the image? From the action list if we mouse over on any lable separate action list should be shown out. Please see the attached screen shot for reference. I should be able to have part2 also as shown in the image. The official Angularjs UI Bootstrap dropdown menu (ui.bootstrap.dropdown) provides only one list of actions (part1 from the image)

image

As of now I have used the following normal code which is working fine :

<div class="btn-group" dropdown is-open="status.isopen">
    <button type="button" class="btn dropdown-toggle" dropdown-toggle>
        Save Options <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href ng-click="saveFilter(ui3DataSet)">Save Filter</a></li>
        <li><a href ng-click="saveAsFilter(ui3DataSet)">Save Filter As</a></li>
    </ul>
</div>

But now when I mouse over saveFilter(ui3DataSet), another list should be shown on the right side. I am looking for any Angularjs plugin provides this feature readily.

As per @Dmitri Zaitsev, the following solves the issue:

<li class="dropdown-submenu">
    <a href ng-click="saveAsFilter(ui3DataSet)">Others</a>
    <ul class="dropdown-menu">
        <li> One </li>
        <li> two </li>
    </ul>
</li>
Madasu K
  • 1,813
  • 2
  • 38
  • 72

1 Answers1

1

Here is a pure Bootstrap implementation:

http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3#comments

You could wrap it into Angular directive if you want to (see e.g. the implementation of jQuery Passthrough by UI Utils).


Also other threads that might be of help/related:

Dynamically creating nested navigation menu item using Bootstrap and Angularjs

AngularJS multilevel dropdown menu for a menu structure generated from a recursive directive

Angular UI multi-level Dropdown Toggle

Community
  • 1
  • 1
Dmitri Zaitsev
  • 13,548
  • 11
  • 76
  • 110