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

Question

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

一切正常。但最初，如果您选择了，则选中所有复选框，所有内容均被选中，条件也可以正常工作（其他三个复选框也均被选中）。但稍后，如果您取消选中其他3个条件（如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>

Answer 1

问题是exptResultType.all仍然为true，而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>