复选框在 uib-accordion 中的 header 中不起作用

Question

如果我将复选框放在 uib-accordion 的 header 中，它不会被选中

<uib-accordion>
  <div uib-accordion-group class="panel-default"
    is-open="daily"
    is-disabled="false">
    <uib-accordion-heading>
      <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="daily">
          Daily
        </label>
      </div>
    </uib-accordion-heading>
    This content is straight in the template.
  </div>
</uib-accordion>

Answer 1

试试

<input type="checkbox" checked="somevalue" ng-model="daily">

您可以输入 alos ng-true-value 和 ng-false-value

Answer 2

手风琴正在捕获复选框单击事件，您需要在单击复选框时停止将事件传播到手风琴

HTML

<input type="checkbox" ng-click="preventCheck($event)" ng-model="daily">

JS

$scope.preventCheck = function(e) {
  e.stopPropagation();
}

如果需要，您甚至可以将其内联

ng-click="$event.stopPropagation();"

Answer 3

试试 uib-btn-checkbox 指令。这将在点击时切换您的绑定模型。

使用 ng-click="$event.stopPropagation()" 来阻止点击事件冒泡

<input type="checkbox" uib-btn-checkbox ng-model="daily" ng-click="$event.stopPropagation()">

复选框在 uib-accordion 中的 header 中不起作用

Checkbox not working in header of uib-accordion

angularjs

angular-ui-bootstrap