lundi 8 juin 2020

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

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>

Aucun commentaire:

Enregistrer un commentaire