Question

我仍然很有角度，所以这可能是一个基本问题，但我还没有弄明白。

如何将一个复选框（绑定到我的模型的属性）放入一个angular-ui手风琴的标题中？我可以在那里找到复选框，但点击似乎永远不会达到它，即它永远不会被“检查”。

<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，我可以通过在click事件上调用e.preventDefault()来获得类似标准jquery-ui手风琴的所需行为，但这似乎不适用于角度-ui手风琴指令。

请在此处查看此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

Answer 2

在checkboxClick(group, $event)方法中将e.preventDefault();更改为$event.preventDefault();。

另请参阅Betty St对this answer.

的评论

Answer 3

添加

纳克单击= “$ event.stopPropagation（）;”

如下所示

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

用于angular-ui bootstrap手风琴指令的标题中的复选框

3 个答案: