checkbox in angular-ui tab's header

Question

I am using AngularUI's bootstrap library 0.4.0. I want to make a tabset that has checkable header, Plunker demo. However, as you can see, I cannot check the checkbox at all. Any suggestion will be greatly appreciated.

thanhquanky · Accepted Answer · 2013-07-30 14:49:55Z

5

I think I have figured out a solution, although it may seem a bit hacky.

in the checkbox, I add an extra ng-click attribute to become

<input type="checkbox" ng-click="stopPropagation($event)"/>

According to AngularJS documentation, $event has the event object of the action, here is click. So if we can stop the propagation of the event, we can check the checkbox. In the controller, I add a method stopPropagation as below

$scope.stopPropagation = function(e) {
    // to make sure it is a checkbox
    if (angular.element(e.currentTarget).prop('tagName') === 'INPUT') {
        e.stopPropagation();
    }
}

This is the Plunker Demo

answered Jul 30, 2013 at 14:49

thanhquanky

1231 gold badge2 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Will Keeling Over a year ago

Worth mentioning that this approach also works for accordions - where you have a checkbox present in the accordion heading.

Collectives™ on Stack Overflow

checkbox in angular-ui tab's header

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related