<div class="header-panel member">
<h2><span class="identifier">WjMenu</span> Class</h2>
<dl class="dl-horizontal">
<dt>File</dt><dd class="filename">wijmo.angular.js</dd>
<dt>Module</dt><dd><a href="topic/wijmo.angular.Module.html"><span class="identifier">wijmo.angular</span></a></dd>
<dt>Base Class</dt><dd><a href="topic/wijmo.angular.WjComboBox.Class.html"><span class="identifier">WjComboBox</span></a></dd>
<dt>Show</dt>
<dd>
<label><input type="checkbox" ng-model="ctx.showInherited"> Inherited Members</label>&nbsp;&nbsp;&nbsp;
<label><input type="checkbox" ng-model="ctx.showRaisers"> Event Raisers</label>
</dd>
</dl>
<div class="comment"><p>AngularJS directive for the <a href="topic/wijmo.input.Menu.Class.html"><span class="identifier">Menu</span></a> control.</p>
<p>Use the <b>wj-menu</b> 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>


<pre>&lt;p&gt;Here is a Menu control used as a value picker:&lt;/p&gt;
&lt;wj-menu header="Tax" value="tax"&gt;
  &lt;wj-menu-item value="0"&gt;Exempt&lt;/wj-menu-item&gt;
  &lt;wj-menu-item value=".05"&gt;5%&lt;/wj-menu-item&gt;
  &lt;wj-menu-item value=".1"&gt;10%&lt;/wj-menu-item&gt;
  &lt;wj-menu-item value=".15"&gt;15%&lt;/wj-menu-item&gt;
&lt;/wj-menu&gt;</pre>
<p><div class="member-panel example"><h3 class="node collapsed">Example</h3><div class="fiddle"><script async src="http://jsfiddle.net/Wijmo5/Wc5Mq/embed/result,html,js,css"></script></div></div></p>
<p>This example creates three <b>Menu</b> 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 <b>itemClicked</b> function in the controller.</p>
<p>The <b>wj-menu</b> directive extends <a href="topic/wijmo.angular.WjComboBox.Class.html"><span class="identifier">WjComboBox</span></a> with the following attributes:</p>
<p><dl class="dl-horizontal">
  <dt>command-path</dt>          <dd><code>@</code> The command to be executed when the item is clicked.</dd>
  <dt>command-parameter-path</dt><dd><code>@</code> The name of the property that contains command parameters.</dd>
  <dt>header</dt>                <dd><code>@</code> The text shown on the control.</dd>
  <dt>is-button</dt>             <dd><code>@</code> Whether the menu should react to clicks on its header area.</dd>
  <dt>value</dt>                 <dd><code>@</code> The value of the selected <b>wj-menu-item</b> value property. </dd>
  <dt>item-clicked</dt>          <dd><code>&</code> The <a href="topic/wijmo.input.Menu.Class.html/#itemClicked"><span class="identifier">itemClicked</span></a> event handler.</dd>
  <dt>got-focus</dt>             <dd><code>&</code> The <a href="topic/wijmo.input.Menu.Class.html/#gotFocus"><span class="identifier">gotFocus</span></a> event handler.</dd>
  <dt>lost-focus</dt>            <dd><code>&</code> The <a href="topic/wijmo.input.Menu.Class.html/#lostFocus"><span class="identifier">lostFocus</span></a> event handler.</dd>
</dl></p>
<p>The <b>wj-menu</b> directive may contain the following child directives:
<a href="topic/wijmo.angular.WjMenuItem.Class.html"><span class="identifier">WjMenuItem</span></a>, <a href="topic/wijmo.angular.WjMenuSeparator.Class.html"><span class="identifier">WjMenuSeparator</span></a> and <a href="topic/wijmo.angular.WjItemTemplate.Class.html"><span class="identifier">WjItemTemplate</span></a>(in case of data-bound Menu control).</p></div>
</div>
<div class="member-panel class members" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
</div>
