[英]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
加
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.