angularjs - angular-ui 引导 Accordion 指令的 header 中的复选框

Question

我对 Angular 还是很陌生，所以这可能是一个基本问题，但我还没有弄清楚。

如何将复选框(绑定(bind)到我的模型的属性)放入 angular-ui Accordion 的标题中？我可以在那里获得复选框，但点击似乎永远不会到达它，即它永远不会被“选中”。

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

据此 jQueryUI accordion with checkboxes ，我可以通过调用 e.preventDefault() 来获得类似于标准 jquery-ui Accordion 所需的行为。在点击事件上，但这似乎不适用于 angular-ui Accordion 指令。

在这里看到这个 plunker: http://plnkr.co/edit/QMnaXJeMagrTPRjbIZbL?p=preview .

Answer 1

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

和:

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

示例: Plunker