Advanced User Interface Controls and Components
Created: 14 January 2016
Each menu item in Angular ContextMenu can show an icon and text in its space. We can use the placeholder for the item icon to display a checkbox or radio button. In following sections of this article, we will show you how to do that.
Similar: ContextMenu Component for Angular 2
In our example, we have a simple context menu with options that allows you to change the font settings for a div element to which the context menu is attached.
Related: HTML Elements with Custom ContextMenu
At first, we need to create the data structure for our menu. In our case, the context menu contains three options that will display a check mark and three options that will display a radio button, divided by a separator menu item.
// Data structure used to populate the context menu
$scope.data = [
{ id: 1, text: "Font Menu", type: "header" },
{ id: 2, text: "Bold", icon: 'icons-medium check-mark', checked: true },
{ id: 3, text: "Italic" },
{ id: 4, text: "Strikethrough" },
{ id: 5, type: "separator" },
{ id: 6, text: "x1", icon: 'icons-medium radio-mark-filled' },
{ id: 7, text: "x1.5", icon: 'icons-medium radio-mark-empty' },
{ id: 8, text: "x2", icon: 'icons-medium radio-mark-empty' }
];
In order to add a checkbox to a menu item, we need to create an icon that will represent a check mark. You can use any image, but PNG format is the best, because it allows having a transparent background.
Next, we need to apply the CSS class name to the icon field of menu item object. Those menu items that are checked will display a check mark, otherwise an empty icon will appear.
Note The field named 'checked' of menu object is a custom field. You can use any other name for this field.
In similar way like above, you can add a radio button to a menu item. A different icon is used in this case, so that only menu item can have radio button checked, other similar items will have unchecked radio button.
The way menu items with radio buttons changes their value so that only one menu item is checked, is explained below.
The Context Menu is now ready to be attached to a HTML element. We are using a simple block element, with a single-lined text in it. The iui-contextmenu directive is applied to the HTML specification of an element with assigned data object.
<div class="block" iui-contextmenu="menuOptions" iui-style="font-weight:{{fontWeight}};font-style:{{fontStyle}};font-size:{{fontSize}}em;text-decoration:{{textDecoration}}">
<span>Right click to open the context menu</span>
</div>
.block
{
background: white;
border: thin solid gray;
width: 600px;
height: 300px;
}
.block span
{
color: #808080;
cursor: default;
display: block;
margin: 130px auto;
text-align: center;
}
.icons-medium
{
margin: 0 7px 0 0;
}
.iui-contextmenu-item
{
width: 150px;
}
.icons-medium
{
margin: 0 7px 0 1px;
}
.check-mark
{
background-position: -192px -120px;
}
.radio-mark-empty
{
background-position: -192px -144px;
}
.radio-mark-filled
{
background-position: -216px -144px;
}
To change the font settings for text inside the block element, we are also using the iui-style directive, which allows us to modify the style of HTML elements on demand during run-time.
Whenever the block element is right-clicked, the attached context menu will popup. Initially, the context menu will display in the way menu data object is set.
To make it fully functional, we need to handle the itemClick event so that whenever a menu item is clicked, the corresponding check or radio mark will change. This will also change the font settings of the block element.
// Set initial font settings for the block element
$scope.fontWeight = 'bold';
$scope.fontStyle = 'normal';
$scope.fontSize = '1';
$scope.textDecoration = 'none';
$scope.menuOptions = {
itemIcon: 'icons-medium empty',
items: $scope.data,
itemClick: function(e){
if (e.item){
if (e.item.id < 5)
e.item.checked = e.item.checked != undefined ? !e.item.checked : true;
else
e.item.checked = true;
// Change the font settings depending on which menu item is clicked
switch (e.item.id){
case 2:
$scope.fontWeight = e.item.checked != false ? 'bold' : 'normal';
break;
case 3:
$scope.fontStyle = e.item.checked != false ? 'italic' : 'normal';
break;
case 4:
$scope.textDecoration = e.item.checked != false ? 'line-through' : 'none';
break;
case 6:
$scope.fontSize = e.item.checked != false ? '1' : '1';
break;
case 7:
$scope.fontSize = e.item.checked != false ? '1.5' : '1';
break;
case 8:
$scope.fontSize = e.item.checked != false ? '2' : '1';
break;
}
// Change the icon of menu item to check or radio mark
if (e.item.id < 5)
e.item.icon = e.item.checked != false ? 'icons-medium check-mark' : 'icons-medium empty';
else {
// Reset the icon for other menu items with radio button
for (var i = 5; i < $scope.data.length; i++){
if ($scope.data[i] != e.item)
$scope.data[i].checked = false;
$scope.data[i].icon = $scope.data[i].checked != false ? 'icons-medium radio-mark-filled' : 'icons-medium radio-mark-empty';
}
}
// Apply the changes to the block element
$scope.$apply();
}
}
}
As it can be seen from code above, whenever menu item is clicked, the checked field changes its value. Depending on this value, the icon of the menu item also changes. In addition for menu items with radio buttons, their value may reset so that only one menu item has its radio button checked.
By using custom images, you can add a checkbox and radio button to menu items in Context Menu Directive for AngularJS. Furthermore, handling of menu events allows you to customize the way checkboxes or radio buttons changes their value. Context Menu can be attached to any HTML element or other AngularJS directives.