A directive for creating a menu with multiple items
Menu allows for custom html templating for each item.
Since macMenu is using ngRepeat, some ngRepeat properties along with item
are exposed on the local scope of each template instance, including:
Variable | Type | Details |
---|---|---|
$index |
Number | iterator offset of the repeated element (0..length-1) |
$first |
Boolean | true if the repeated element is first in the iterator. |
$middle |
Boolean | true if the repeated element is between the first and last in the iterator. |
$last |
Boolean | true if the repeated element is last in the iterator. |
$even |
Boolean | true if the iterator position $index is even (otherwise false). |
$odd |
Boolean | true if the iterator position $index is odd (otherwise false). |
item |
Object | item object |
To use custom templating
<mac-menu>
<span> {{item.label}} </span>
</mac-menu>
Template default to {{item.label}}
if not defined
Parameters:
Name | Type | Description |
---|---|---|
mac-menu-items |
Expression | List of items to display in the menu
Each item should have a |
mac-menu-select |
function | Callback on select
|
mac-menu-style |
Object | Styles apply to the menu |
mac-menu-index |
Expression | Index of selected item |
Example
Current selected item: {{selectedItem}}
<mac-menu mac-menu-items="menuItems" mac-menu-select="selectingMenuItem(index)"></mac-menu>