jeudi 3 novembre 2016

Checkbox in accordion header - Angularjs

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