Readme

Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.

This directive is composed by three parts:

• uib-dropdown which transforms a node into a dropdown.
• uib-dropdown-toggle which allows the dropdown to be toggled via click. This directive is optional.
• uib-dropdown-menu which transforms a node into the popup menu.

Each of these parts need to be used as attribute directives.

uib-dropdown settings

• auto-close (Default: always) - Controls the behavior of the menu when clicked.

  • always - Automatically closes the dropdown when any of its elements is clicked.
  • disabled - Disables the auto close. You can control it manually with is-open. It still gets closed if the toggle is clicked, esc is pressed or another dropdown is open.
  • outsideClick - Closes the dropdown automatically only when the user clicks any element outside the dropdown.

• dropdown-append-to <small class="badge">$</small> (Default: null) - Appends the inner dropdown-menu to an arbitrary DOM element.

• dropdown-append-to-body <small class="badge">B</small> (Default: false) - Appends the inner dropdown-menu to the body element if the attribute is present without a value, or with a non false value.

• is-open <small class="badge">$</small> <i class="glyphicon glyphicon-eye-open"></i> (Default: false) - Defines whether or not the dropdown-menu is open. The uib-dropdown-toggle will toggle this attribute on click.

• keyboard-nav: <small class="badge">B</small> (Default: false) - Enables navigation of dropdown list elements with the arrow keys.

• on-toggle(open) <small class="badge">$</small> - An optional expression called when the dropdown menu is opened or closed.

uib-dropdown-menu settings

• template-url (Default: none) - You may specify a template for the dropdown menu. Check the demos for an example.

Additional settings uibDropdownConfig

• appendToOpenClass (Default: uib-dropdown-open) - Class to apply when the dropdown is open and appended to a different DOM element.

• openClass (Default: open) - Class to apply when the dropdown is open.

Known issues

For usage with ngTouch, it is recommended to use the programmatic is-open trigger with ng-click - this is due to ngTouch decorating ng-click to prevent propagation of the event.