How to fix checkbox select and deselect issue in angular js? - html

Question

In my angular js project, I have four checkboxes. in that four checkboxes, three checkboxes have three conditions (like ng-hide and ng-show) and one checkbox has select all and deselects all conditions.
everything working fine. but initially if you select, select all checkbox everything got selected and conditions also working fine(other three checkboxes also got selected). but later without deselecting all checkbox if you uncheck the other three checkboxes that condition (like ng-hide and ng-show) not working.
Any way to fix this?
<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

The problem is that exptResultType.all will still be true, while the checkbox for all is coupled to the other three values, the property itself is not. The easiest thing to do is ignore the fact it exists for computation purposes:
<!-- 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>