Question

我正在尝试添加一个复选框以选择/取消选择所有项目，然后将所有项目相加。我已经完成了一些代码。但是，这两个功能现在是分开的，我想将其合并在一起以实现目标。

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()">

这是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);
                        }
                    }
                });
            };

我尝试将ng-change合并为“ checkAll（）; calBalance（）”，但不起作用。

Answer 1

如果只考虑使用单个函数来处理两个复选框，那么可以将单个函数的if条件与两个不同的复选框控件区分开。

//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);
               }
           }
       });
    }
}

Answer 2

您可以将两个复选框合并为一个，同时执行两项操作，即全选并在一个复选框上计算更改的余额。在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="">

然后在逻辑中创建一个新函数checkAllAndCalBalance来完成这两个任务。 由于另一个复选框的ng-model不再存在，因此您必须在逻辑中手动设置其值，以使依赖于trx.marked_reconciled的计算不会受到影响：

 $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();
};

希望这会有所帮助。

AngularJs复选框全选

2 个答案: