v5.20192.631
|

WjMenu Class

AngularJS directive for the Menu control.

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).

Hierarchy