时间戳

首页 > 解决方案 > AngularJS Bootstrap 复选框不检查点击

html - AngularJS Bootstrap 复选框不检查点击

问题描述

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

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

标签： htmlangularjstwitter-bootstrapinputcheckbox

解决方案

问题是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>

这是工作样本。

推荐阅读