Checkbox are not uncheck after condition is false in AngularJS?

Question

This is our controller code

              /**
        * @Summary: setProductInAlbum function, to create album
        * @param: index, productObj
        * @return: callback(response)
        * @Description:
        */ 
       $scope.allAlbums = [];
       $scope.sellerUserTypeKeyId = [];
       
       $scope.getAlbumsBySellerUserTypeKeyId = function() {
        $scope.sellerUserTypeKeyId = Number(AUTH.userTypeKeyId);
        var PRODUCT_DB_REF = firebase.database().ref('datastore/productsAlbum');
       
       PRODUCT_DB_REF.orderByChild("sellerUserTypeKeyId").equalTo($scope.sellerUserTypeKeyId)
       .on("value", function(snapshot) {
          var value = snapshot.val();
          if(value != null) {
          $scope.allAlbums = objToArray(value);
         }
        });
       }
              /**
        * @Summary: addProductKeyInAlbum function, to filter the connected user
        * @param: index, isChecked, productObj
        * @return: callback(response)
        * @Description:
        */
              
       $scope.getAlbumsBySellerUserTypeKeyId();
              $scope.selectedProductKey        = [];
       $scope.getSelectedProductObject  = [];
       
       $scope.addProductKeyInAlbum = function(index, isChecked, productObj) {
        $scope.productObj = productObj;
        if(isChecked) {
         //PUSH THE PRODUCT kEYID INO THE ARRAY AND PASS TO THE getProduct FUNCTION
         $scope.selectedProductKey.push($scope.productObj.keyId);
          var data = {
           keyId : $scope.selectedProductKey
          }
          //CALL THE getProduct FUNCTION FOR GET THE LIST OF THE SELCETD OBJECTS
          SellerDashboardService.getProduct(function(response) {
           if(response != null) {
            if (response.data.isSuccess) {
             $scope.getSelectedProductObject = response.data.UserProductList;
            }
           }
          }, data);
          //HERE WE WEILL BLANK THE ARRAY AFTER THE RESPONSE IS RECEIVED FROM THE SERVICE
        } else {
         //SPLICE THE PRODUCT kEYID FROM THE ARRAY 
         $scope.selectedProductKey.splice(index, 1);
         console.log($scope.selectedProductKey);
        }
       }

I have an 2 array if the id will be match checkbox will be checked but if id will be not match checkbox is uncheck but in my condition both the checkbox will be checked

<div id="removeSelectedProductKey" class="checkbox albumSection w3-margin-top-10" ng-repeat="productObject in getSelectedProductObject">
  <div class="w3-margin-top-10" ng-repeat="albumList in allAlbums">
    <div>
      <input type="checkbox" ng-checked="productObject.keyId == albumList.productKey" ng-click="removeSelectedProductKey($event, $index)" />
    </div>
    <div>
      <input type="checkbox" ng-checked="productObject.keyId != albumList.productKey" />
    </div>
  </div>
  <label>
  </label>
  <br>
</div>

<div id="removeSelectedProductKey" class="checkbox albumSection w3-margin-top-10" ng-repeat="productObject in getSelectedProductObject">
  <div class="w3-margin-top-10" ng-repeat="albumList in allAlbums">
    <div>
      <input type="checkbox" ng-checked="productObject.keyId == albumList.productKey" ng-click="removeSelectedProductKey($event, $index)" />
    </div>
    <div>
      <input type="checkbox" ng-checked="productObject.keyId != albumList.productKey" />
    </div>
  </div>
  <label>
  </label>
  <br>
</div>

how to resolve this issue?

Aayushi Jain · Answer 1 · 2017-07-24T11:43:17.347

0

Rather using ng-if or ng-disabled, you can make use of ng-checked, like this:

<div>
  <input type="checkbox" ng-checked="1 == 2" />
</div>
<div>
  <input type="checkbox" ng-checked="1 == 1" />
</div>

Check here.

Another thing is whatever you write in checked="" it will always be treated as true. For reference, see this answer.

Also by using ng-checked you don't have to write the same checkbox code two times, so it will be checked if the condition is true and unchecked if the condition is false.

Update

Plunker

edited Jul 24 '17 at 11:43

answered Jul 24 '17 at 11:09

Aayushi Jain

2,861
2
29
36

sir i am using above code but checkbox are not visible after apply this condition? – Kapil Soni Jul 24 '17 at 11:18
can you post your controller code as well as the issue is not in your html code? – Aayushi Jain Jul 24 '17 at 11:26
sorry I can't go through that, I am particularly interested in what is coming in `getSelectedProductObject` and `allAlbums` – Aayushi Jain Jul 24 '17 at 11:33
Have you mentioned right controller name in your html? – Aayushi Jain Jul 24 '17 at 11:33
ya mam i have mentioned right controller and both are the array? – Kapil Soni Jul 24 '17 at 11:35
mam i have print this in page : productObject.keyId == albumList.productKey and i got this result --4842661525585920 [4842661525585920] – Kapil Soni Jul 24 '17 at 11:37
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/149989/discussion-between-aayushi-jain-and-kapil-soni). – Aayushi Jain Jul 24 '17 at 11:43
1

Updated my answer. – Aayushi Jain Jul 24 '17 at 11:46

Checkbox are not uncheck after condition is false in AngularJS?

1 Answers1