Checkbox in header for angular-ui bootstrap accordion directive

Question

I'm still pretty new to angular, so this may be a basic question, but I haven't been able to figure it out yet.

How do I put a checkbox (bound to a property of my model) into a header for an angular-ui accordion? I can get the checkbox in there, but the click never seems to get to it, i.e., it never gets "checked".

<accordion>
  <accordion-group ng-repeat="group in groups" is-open="group.open">
    <accordion-heading>
      <input 
          type="checkbox" 
          ng-model="group.checked" 
          ng-click="checkboxClick(group, $event)" />
      Title
    </accordion-heading>
    {{group.content}}
  </accordion-group>    
</accordion>

According to this jQueryUI accordion with checkboxes, I can get something like the desired behavior with the standard jquery-ui accordion by calling e.preventDefault() on the click event, but that doesn't seem to work with the angular-ui accordion directive.

See this plunker here: http://plnkr.co/edit/QMnaXJeMagrTPRjbIZbL?p=preview.

Ken Smith · Accepted Answer · 2013-12-06 00:35:38Z

11

<accordion>
  <accordion-group ng-repeat="group in groups" is-open="group.open">
    <accordion-heading>
      <input type="checkbox" ng-checked="group.checked" ng-click="checkboxClick(group, $event)" />
      {{group.title}}
    </accordion-heading>
    {{group.content}}
  </accordion-group>

And:

$scope.checkboxClick = function(group, $event){
  $event.stopPropagation();
}

Example: Plunker

edited Dec 6, 2013 at 0:35

Ken Smith

20.5k17 gold badges105 silver badges151 bronze badges

answered Dec 5, 2013 at 23:19

Rob

2,7161 gold badge22 silver badges27 bronze badges

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

3 Comments

Ken Smith Over a year ago

That doesn't seem to work - the checkbox never changes state. See plnkr.co/edit/tTGy9grHIByb8THbSz9W?p=preview.

Rob Over a year ago

My fault, I meant ng-checked. You are also going to need a timeout in your click event. You can use $timeout for this. I edited my answer and gave you an example.

Ken Smith Over a year ago

OK, that was it. A few minor tweaks and I got it working how I wanted. See plnkr.co/edit/O2p0Dj9RZvpXDlao6RLd?p=preview. Many thanks!

Community · Accepted Answer · 2017-05-23 12:02:37Z

0

In the checkboxClick(group, $event) method change e.preventDefault(); to $event.preventDefault();.

See also Betty St's comment on this answer.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered May 16, 2015 at 0:23

Trisped

6,0442 gold badges51 silver badges65 bronze badges

Comments

PK-1825 · Accepted Answer · 2016-07-02 08:53:04Z

0

Add

ng-click="$event.stopPropagation();"

like given Below

<uib-accordion>
    <uib-accordion-group is-open="status.open">
        <uib-accordion-heading>
         <input id="Checkbox1" ng-click="$event.stopPropagation();" type="checkbox" /> I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
      </uib-accordion-heading>
  </uib-accordion>

answered Jul 2, 2016 at 8:53

PK-1825

1,51921 silver badges43 bronze badges

Collectives™ on Stack Overflow

Checkbox in header for angular-ui bootstrap accordion directive

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related