如何修复angular js中的复选框选择和取消选择问题？答案

【问题标题】：How to fix checkbox select and deselect issue in angular js?如何修复angular js中的复选框选择和取消选择问题？
【发布时间】：2020-09-27 03:51:18
【问题描述】：

在我的 Angular js 项目中，我有四个复选框。在这四个复选框中，三个复选框具有三个条件（如 ng-hide 和 ng-show），一个复选框具有全选和取消全选。

一切正常。但最初，如果您选择，请选中所有复选框，所有内容都已选中，并且条件也可以正常工作（其他三个复选框也已选中）。但稍后如果您取消选中其他三个复选框（如 ng-hide 和 ng-show）不起作用，则无需取消选中所有复选框。

有什么办法解决这个问题？

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
 

<div ng-app>
    <div class="choose-group pt-0">
                  <input
                    type="checkbox"
                    ng-model="exptResultType.status"
                    value="1" >status
                  <input
                    type="checkbox"
                    ng-model="exptResultType.headercontent"
                    value=2>header
                  <input
                    ng-show="addNlpStepForm.restfulEntity.method != 'HEAD'"
                    type="checkbox"
                    ng-model="exptResultType.bodycontent"
                    value=3>body

                  <input
                    type="checkbox"
                    id="all"
                    ng-click="(exptResultType.status=exptResultType.all);
                              (exptResultType.headercontent=exptResultType.all);
                              (exptResultType.bodycontent=exptResultType.all)"
                    ng-checked="exptResultType.status&&exptResultType.headercontent&&
                                exptResultType.bodycontent"
                  
                    name="exptResultType"
                    ng-model="exptResultType.all"
                    value=4>all
                </div>
                <!--  show status content-->
              <div class="form-group pb-30 ts-col-100"
                   ng-show="(exptResultType.status==true)||(exptResultType.all==true)" >
                status code
              </div>

              <!-- header content -->
              <div class="form-group d-flex flex-wrap ts-col-100 pb-10"
                   ng-show="(exptResultType.headercontent==true)||(exptResultType.all==true)">
               header
              </div>

              <!-- body content  -->
              <div class="form-group pb-0 ts-col-100" ng-show="(exptResultType.bodycontent==true)||(exptResultType.all==true)">
              body
                </div>
                
</div>

【问题讨论】：

标签： html angularjs checkbox

【解决方案1】：

问题是exptResultType.all 仍然为真，而all 的复选框与其他三个值耦合，而属性本身则不是。最简单的做法是忽略它为计算目的而存在的事实：

<!--  show status content-->
<div class="form-group pb-30 ts-col-100"
  ng-show="exptResultType.status">
    status code
</div>

<!-- header content -->
<div class="form-group d-flex flex-wrap ts-col-100 pb-10"
  ng-show="exptResultType.headercontent">
header
</div>

<!-- body content  -->
<div class="form-group pb-0 ts-col-100"
  ng-show="exptResultType.bodycontent">
body
</div>

【讨论】：