Ken Smith Ken Smith - 5 months ago 239
AngularJS Question

Checkbox in header for angular-ui bootstrap accordion directive

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 question, 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.

Rob Rob
Answer
<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