AngularJS Bootstrap 单击时复选框未选中

Question

我在我的 AngularJS/Bootstrap 应用程序中使用了一个复选框，我面临的问题是当我在未选中的情况下单击它时，它没有显示复选标记。虽然正在调用 toggleVal() 方法并且它正在执行这些步骤，但它没有显示复选标记。另外，我的范围变量 myvar 是 0 或 1，我想相应地显示它。

<a href class="list-group-item list-group-item-action flex-column align-items-start">
 <div class="d-flex w-100 justify-content-between mt-2">
  <input ng-click="toggleVal()" class="form-check-input ml-2" type="checkbox"  
  ng-model="myvar"
  ng-checked="myvar"
  ng-true-value="1" ng-false-value="0">
 </div>
</a>

-- 更新：所以我添加了一些额外的细节，包括更新的代码。复选框位于 Bootstrap 列表组项内，可能会影响选择。

Answer 1

问题是anchor tag。当您单击复选框时，实际上您也单击了锚标记。所以这意味着您的复选框在每次点击中被点击了两次。

要解决此问题，只需将 href="Javascript:void(0);" 添加到您的锚标记即可。

    <a href="Javascript:void(0);" class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between mt-2">
        <input  class="form-check-input ml-2" type="checkbox"
                ng-model="myvar"
                ng-checked="myvar == 1"
                ng-true-value="1" ng-false-value="0">
      </div>
    </a>

Here 是工作样本。

AngularJS Bootstrap 单击时复选框未选中

AngularJS Bootstrap checkbox not checking on click

html

checkbox

input

twitter-bootstrap

angularjs