AngularJs checkbox select all

I'm trying to add a checkbox to select/deselect all the item then sum all the item. I have done some code for it. however, both function is separate now and I would like to merge it together to achieve the target.

HTML

//Select all checkbox
<input type="checkbox" ng-change="checkAll()" ng-model="params.checkbox[0]" 
class="ng-valid ng-dirty ng-valid-parse ng-touched ng-empty" style="">

//Select a single checkout and do cal balance
<input type="checkbox" name="marked_reconciled" ng- 
model="trx.marked_reconciled" ng-change="calBalance()"> 

This is AngularJs

$scope.checkAll = function () { angular.forEach($scope.records, function (v) 
{ $scope.params.checkbox[v.id] = $scope.params.checkbox[0]; }); };

$scope.calBalance = function () {
                if (!$scope.trans) {
                    return;
                }
                var current = 0;
                var statement_mth = new Date($scope.item.reconcile_date).getMonth();
                angular.forEach($scope.trans.trans, function (trx) {
                    var reconcile_mth = new Date(trx.reconcile_on).getMonth();
                    if (trx.marked_reconciled && ((statement_mth == reconcile_mth) || !trx.reconcile_on)) {
                        if (trx.entry == 'debit') {
                            current += parseFloat(trx.amount);
                        } else if (trx.entry == 'credit') {
                            current -= parseFloat(trx.amount);
                        }
                    }
                });
            };

I have tried to merge the ng-change as "checkAll();calBalance()" but doesn't work.

2 answers

  • answered 2018-11-08 07:52 Immanuel Kirubaharan

    If you only consider to have single function to handle both the checkbox, then you can have a single function with if condition to differentiate from two different checkbox control.

    //Select all checkbox
    <input type="checkbox" ng-change="checkBoxSelection('All')" ng-model="params.checkbox[0]" 
    class="ng-valid ng-dirty ng-valid-parse ng-touched ng-empty" style="">
    
    //Select a single checkout and do cal balance
    <input type="checkbox" name="marked_reconciled" ng- 
    model="trx.marked_reconciled" ng-change="checkBoxSelection('')"> 
    
    
    $scope.checkBoxSelection = function(mode){
        if(mode==='All'){
            angular.forEach($scope.records, function (v) { 
                $scope.params.checkbox[v.id] = $scope.params.checkbox[0]; 
            });
        }else {
           if (!$scope.trans) {
               return;
           }
           var current = 0;
           var statement_mth = new Date($scope.item.reconcile_date).getMonth();
           angular.forEach($scope.trans.trans, function (trx) {
               var reconcile_mth = new Date(trx.reconcile_on).getMonth();
               if (trx.marked_reconciled && ((statement_mth == reconcile_mth) || !trx.reconcile_on)) {
                   if (trx.entry == 'debit') {
                       current += parseFloat(trx.amount);
                   } else if (trx.entry == 'credit') {
                       current -= parseFloat(trx.amount);
                   }
               }
           });
        }
    }
    

  • answered 2018-11-08 09:16 Nabil Shahid

    You can merge the two checkboxes into one performing both operations i.e. select all and calculate balance on the change on one checkbox. In the html:

    <input type="checkbox" ng-change="checkAllAndCalBalance()" ng-model="params.checkbox[0]" 
    class="ng-valid ng-dirty ng-valid-parse ng-touched ng-empty" style="">
    

    And in the logic create a new function checkAllAndCalBalance to do both the tasks. As the ng-model of the other checkbox is not there anymore, you have to set its value manually in your logic so that the computations depending on trx.marked_reconciled won't get affected:

     $scope.checkAll = function () { angular.forEach($scope.records, function (v) 
    { $scope.params.checkbox[v.id] = $scope.params.checkbox[0]; }); };
    
    $scope.calBalance = function () {
                    if (!$scope.trans) {
                        return;
                    }
                    var current = 0;
                    var statement_mth = new Date($scope.item.reconcile_date).getMonth();
                    angular.forEach($scope.trans.trans, function (trx) {
                        var reconcile_mth = new Date(trx.reconcile_on).getMonth();
                        if (trx.marked_reconciled && ((statement_mth == reconcile_mth) || !trx.reconcile_on)) {
                            if (trx.entry == 'debit') {
                                current += parseFloat(trx.amount);
                            } else if (trx.entry == 'credit') {
                                current -= parseFloat(trx.amount);
                            }
                        }
                    });
        };
    
    $scope.checkAllAndCalBalance = function(){
        //as not specified in ng-model, setting the value of trx.marked_reconciled manually in logic
        $scope.trx.marked_reconciled=$scope.params.checkbox[0];
        //select all  
        $scope.checkAll();
        //calculate balance
        $scope.calBalance();
    };
    

    Hope this helps.