I'm having some problems with checkboxes in an accordion header.
This is the html that I am using.
<uib-accordion-group is-open="vm.getTab('materialDamage').isOpen" is-disabled="!vm.model.materialDamage.isUsed">
<uib-accordion-heading>
<div ng-click="vm.isUsedTab($event, vm.model.materialDamage, 'materialDamage')">
<label><input type="checkbox" ng-model="vm.model.materialDamage.isUsed" ng-click="vm.checkboxClick($event, vm.model.materialDamage, 'materialDamage')">Material Damage</label>
</div>
</uib-accordion-heading>
<carear-material-damage-form model="vm.model.materialDamage"></carear-material-damage-form>
</uib-accordion-group>
Default the header is disabled. But when you click on the div or the checkbox the header should be opened.
The problem that I am having is that when I click on the div it opens the accordion tab and checks the checkbox(which is oke). But when I try to uncheck the checkbox it should close my accordion tab again. The checkbox is unchecked but my tab is still open.
Here is the directive logic I am using.
isUsedTab($event: any, data: any, tab: string) {
//$event.stopPropagation();
if (!data.isUsed) {
this.tabs[tab].isOpen = !this.tabs[tab].isOpen;
data.isUsed = !data.isUsed;
}
}
checkboxClick($event: any, data: any, tab: string) {
$event.stopPropagation();
if (data.isUsed) {
this.tabs[tab].isOpen = true;
} else {
this.tabs[tab].isOpen = false;
this.notificationService.warn('request.notifications.uncheckingCheckBox');
}
}
The notification is triggered in the else statement so normally it should set the tab.isOpen to false. Any idea how I can fix this problem?
Thanks, Brent
Aucun commentaire:
Enregistrer un commentaire