Use the wj-menu directive to add drop-down menus to your AngularJS applications. Note that directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For example:

<p>Here is a Menu control used as a value picker:</p>
<wj-menu header="Tax" value="tax">
  <wj-menu-item value="0">Exempt</wj-menu-item>
  <wj-menu-item value=".05">5%</wj-menu-item>
  <wj-menu-item value=".1">10%</wj-menu-item>
  <wj-menu-item value=".15">15%</wj-menu-item>
</wj-menu>

Example

This example creates three Menu controls. The first is used as a value picker, the second uses a list of commands with parameters, and the third is a group of three menus handled by an itemClicked function in the controller.

The wj-menu directive extends wijmo.angular.input.WjComboBox with the following attributes:

command-path

@ The command to be executed when the item is clicked.

command-parameter-path

@ The name of the property that contains command parameters.

header

@ The text shown on the control.

is-button

@ Whether the menu should react to clicks on its header area.

value

@ The value of the selected wj-menu-item value property.

item-clicked

& The Menu.itemClicked event handler.

got-focus

& The Menu.gotFocus event handler.

lost-focus

& The Menu.lostFocus event handler.

The wj-menu directive may contain the following child directives: wijmo.angular.input.WjMenuItem, wijmo.angular.input.WjMenuSeparator and wijmo.angular.input.WjItemTemplate(in case of data-bound Menu control).