0

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

4

1 回答 1

0

问题是这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>
于 2020-06-08T12:07:26.890 回答