mardi 2 août 2016

Angular Checkboxes “Select All” functionality not working

I have the code like this
HTML

 <div class="check_toggle" ng-click="toggleAll(payout)">                               
         select all
   <input type="checkbox" aria-label="Art"  ng-model="checkall"/>
 </div>

<table>
<thead>
  <tr>
    <th>Week</th>
    <th>Release Payment</th>
  </tr>
</thead>
<tbody>

  <tr ng-repeat="item in payout">
    <td></td>

    <td>
      <div class="checkbox pay_check">

        <input aria-label="Art" type="checkbox" ng-model="allCheckBox[$index]" ng-click="selectItem(item._id,selected,payout)">

      </div>
    </td>
  </tr>
</tbody>

controller

 $scope.payout= [
{'_id':1, value:'Option1'},  
{'_id':2, value:'Option2'}
];

 $scope.toggleAll = function(payout) {

        $scope.checkall = !$scope.checkall;
        for(var i=0;i<payout.length;i++){
             if($scope.checkall===false){
                   $rootScope.selected=[];
                   $scope.allCheckBox[i] = $scope.checkall ;
             }else{
                 $rootScope.selected[i]=payout[i]._id;
                 $scope.allCheckBox[i] =$scope.checkall ;
             }

        }
 }


    $scope.selectItem = function(id, list,payout) {

        console.log('id',id);
        var idx = list.indexOf(id);
        if (idx > -1) {
            list.splice(idx, 1);
        } else {
            list.push(id);
        }


        console.log(payout);
        // $scope.checkall = $scope.payout.every(function(itm){ console.log('itm',itm.selected);return itm.selected; })

         console.log("Selected Invoice", $rootScope.selected);
         if(payout.length==$rootScope.selected.length){
            $scope.checkall=true;
            console.log($scope.checkall);
            // $scope.checkall=  $scope.checkall;
            console.log('All checkboxes selected');

        }
        else{
            $scope.checkall=false;
             console.log('Not All checkboxes selected');
            // $scope.checkall =  $scope.checkall;
        }

    }

I have separate checkboxes using ng-repeat, and select all checkbox.First when i select all the individual select boxes, the checkall box will checked automatically as i expected and also check all also select all the individual checkboxes as i expected, but the issue is if i click checkall checkbox first and all individual items next, it will not work as i expected(the checkall checkbox will not be checked or un-checked based on selection).
i tried some stack overflow answers, but it is the same. Could anyone tell me how. please




Aucun commentaire:

Enregistrer un commentaire