A personalized directive has been developed for checkboxes that is applicable throughout the application. The code for creating the checkbox is as follows:
JS
angular.module("myApp")
.component("ngCheckbox", {
template:
'<div class="ng-control-checkbox">' +
'<input id="check" type="checkbox" data-ng-model="$ctrl.checked" class="checkbox">' +
'<label for="check">'+
'<span data-ng-bind="$ctrl.label"></span>' +
'</label>' +
'</div>' +
'',
bindings: {
label: '=?',
checked: '='
},
controller: function () {
var $ctrl = this;
}
});
CSS
.ng-checkbox label{
cursor: pointer;
margin-left: 20px;
}
.ng-checkbox label:before {
content: "\e911";
cursor: pointer;
color: #84919A;
}
.checkbox {
display: none;
}
.checkbox:checked + label:before {
content: "\e910";
cursor: pointer;
color: $color_forest_green;
}
HTML
<div data-ng-repeat="notification in notificationList" >
<ng-checkbox data-checked="notification.selected"></ng-checkbox>
<div>
- The use of CSS ::before is implemented to alter the content. JavaScript will not be utilized for this purpose.
- No changes can be made to the HTML structure, as specific application icons are required as CSS content for the checkbox.
Issue
The binding of the id of the checkbox with the for of the label prevents the usage of this checkbox directive within an ng-repeat. A solution is being sought for this issue that has caused a standstill in progress.
Thank you in advance.