簡體   English   中英

用於angular-ui bootstrap手風琴指令的標題中的復選框

[英]Checkbox in header for angular-ui bootstrap accordion directive

我仍然很有角度,所以這可能是一個基本問題,但我還沒有弄明白。

如何將一個復選框(綁定到我的模型的屬性)放入一個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手風琴 ,我可以通過在click事件上調用e.preventDefault()獲得類似標准jquery-ui手風琴所需的行為,但這似乎不適用於angular-ui手風琴指令。

請在此處查看此plunker: http ://plnkr.co/edit/QMnaXJeMagrTPRjbIZbL?p = preview。

<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

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

另見Betty St對此答案的評論

NG-點擊= “$ 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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM