javascript - 如何根据选中的复选框计算总数？

Question

我正在尝试根据复选框选择来计算检查的总金额，如果选择复选框，则应添加总金额。我还在下面添加了屏幕截图，因为我已经清楚地解释了这一点，请仔细阅读。在我的主要项目中，如果我单击其他表，则每个子表中都会显示“已检查总数”，所有表的已检查总数都会更改，但您想显示单个表的检查总数。

如何做到这一点，我已在下面上传了代码

var app = angular.module('MyApp', [])
app.controller('MyController', function($scope) {
  $scope.Customers = [{
      CustomerId: 1,
      Name: "Prashant Olekar",
      Country: "United States",
      Orders: [{
          OrderId: 10248,
          Freight: 32.38,
          amount: 10000,
          ShipCountry: 'France'
        },
        {
          OrderId: 10249,
          Freight: 12.43,
          amount: 10000,
          ShipCountry: 'Japan'
        },
        {
          OrderId: 10250,
          Freight: 66.35,
          amount: 10000,
          ShipCountry: 'Russia'
        }
      ]
    },
    {
      CustomerId: 2,
      Name: "Hemant K",
      Country: "India",
      Orders: [{
          OrderId: 10266,
          Freight: 77.0,
          amount: 10000,
          ShipCountry: 'Argentina'
        },
        {
          OrderId: 10267,
          Freight: 101.12,
          amount: 10000,
          ShipCountry: 'Australia'
        },
        {
          OrderId: 10268,
          Freight: 11.61,
          amount: 10000,
          ShipCountry: 'Germany'
        }
      ]
    },
    {
      CustomerId: 3,
      Name: "Richard",
      Country: "France",
      Orders: [{
        OrderId: 10250,
        Freight: 65.83,
        amount: 10000,
        ShipCountry: 'Brazil'
      }]
    },
    {
      CustomerId: 4,
      Name: "Robert Schidner",
      Country: "Russia",
      Orders: [{
          OrderId: 10233,
          Freight: 89.11,
          amount: 10000,
          ShipCountry: 'Belgium',
        },
        {
          OrderId: 10234,
          Freight: 51.30,
          amount: 10000,
          ShipCountry: 'Canada'
        },
        {
          OrderId: 10235,
          Freight: 46.11,
          amount: 10000,
          ShipCountry: 'Austria'
        }
      ]
    }
  ];

   $scope.innertotalvalue = function (itemOrder) {
        if (itemOrder != undefined) {
            var innertotalvalue = 0;
            for (j = 0; j < itemOrder.Orders.length; j++) {
                if (itemOrder.Orders[j].amount != 0) {
                    innertotalvalue = innertotalvalue + itemOrder.Orders[j].amount;
                }
            }
        }
        return innertotalvalue;
    }


  $scope.chkselect_onchange = function(c, item) {
    var totalvalue = 0;
    var ordercount = 0;
    var customercount = 0;

    angular.forEach(c, function(cust) {
      angular.forEach(cust.Orders, function(order) {
        if (cust.select == true) {
          if (order.amount != 0) {
            order.select = true;
          } else {
            order.select = false;
          }
        } else {
          order.select = false;
        }
      })
    })
  }

});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div ng-app="MyApp" ng-controller="MyController">
  <div class="container" style="margin-top:40px;">
    <div class="row">
      <div class="col-md-12">
        <table class="table table-condensed table-bordered table-hover">
          <thead>
            <tr>
              <td></td>
              <th>Customer Id</th>
              <th>Name</th>
              <th>Country</th>
              <th>Orders</th>
            </tr>
          </thead>
          <tbody ng-repeat="c in Customers">
            <tr>
              <td>
                <input id="mainCheck" type="checkbox" ng-change="chkselect_onchange(Customers,c)" ng-model="c.select" /></td>
              <td>{{c.CustomerId}}</td>
              <td>{{c.Name}}</td>
              <td>{{c.Country}}</td>
              <td>
                <table class="table table-condensed table-bordered">
                  <thead>
                    <tr>
                      <th></th>
                      <th>Order Id</th>
                      <th>Freight</th>
                      <th>ShipCountry</th>
                      <th>Amount</th>
                    </tr>
                  </thead>
                  <tbody ng-repeat="o in c.Orders">
                    <tr>
                      <td>
                        <input id="subCheck" type="checkbox" ng-change="chklotselect_onchange(Customers)" ng-model="o.select" /></td>
                      <td>{{o.OrderId}}</td>
                      <td>{{o.Freight}}</td>
                      <td>{{o.ShipCountry}}</td>
                      <td>{{o.amount}}</td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="2">Checked Total:______</td>
                      <td></td>
                      <td colspan="2"><span class="pull-right">Total:{{innertotalvalue(c)}}</span> </td>
                    </tr>
                  </tfoot>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>

Answer 1

您必须向 $scope 添加自定义方法才能为您进行求和。

$scope.customerTotal = function (customer) {
    var sum = 0;
    customer.Orders.forEach(function (order) {
        sum += order.amount;
    });
    return sum;
}

$scope.customerCheckedTotal = function (customer) {
    var sum = 0;
    customer.Orders.forEach(function (order) {
        if (order.select) sum += order.amount;
    });
    return sum;
}

工作片段:

var app = angular.module('MyApp', [])
app.controller('MyController', function($scope) {
  $scope.Customers = [{
      CustomerId: 1,
      Name: "Prashant Olekar",
      Country: "United States",
      Orders: [{
          OrderId: 10248,
          Freight: 32.38,
          amount: 10000,
          ShipCountry: 'France'
        },
        {
          OrderId: 10249,
          Freight: 12.43,
          amount: 10000,
          ShipCountry: 'Japan'
        },
        {
          OrderId: 10250,
          Freight: 66.35,
          amount: 10000,
          ShipCountry: 'Russia'
        }
      ]
    },
    {
      CustomerId: 2,
      Name: "Hemant K",
      Country: "India",
      Orders: [{
          OrderId: 10266,
          Freight: 77.0,
          amount: 10000,
          ShipCountry: 'Argentina'
        },
        {
          OrderId: 10267,
          Freight: 101.12,
          amount: 10000,
          ShipCountry: 'Australia'
        },
        {
          OrderId: 10268,
          Freight: 11.61,
          amount: 10000,
          ShipCountry: 'Germany'
        }
      ]
    },
    {
      CustomerId: 3,
      Name: "Richard",
      Country: "France",
      Orders: [{
        OrderId: 10250,
        Freight: 65.83,
        amount: 10000,
        ShipCountry: 'Brazil'
      }]
    },
    {
      CustomerId: 4,
      Name: "Robert Schidner",
      Country: "Russia",
      Orders: [{
          OrderId: 10233,
          Freight: 89.11,
          amount: 10000,
          ShipCountry: 'Belgium',
        },
        {
          OrderId: 10234,
          Freight: 51.30,
          amount: 10000,
          ShipCountry: 'Canada'
        },
        {
          OrderId: 10235,
          Freight: 46.11,
          amount: 10000,
          ShipCountry: 'Austria'
        }
      ]
    }
  ];

  var totalvalue = 0;
  var ordercount = 0;
  var customercount = 0;

  angular.forEach($scope.Customers, function(cust) {
    angular.forEach(cust.Orders, function(order) {
      if (order.amount != 0) {
        ordercount++;
        totalvalue = totalvalue + order.amount;
      }
    })
  })
  $scope.total = totalvalue;

  $scope.customerTotal = function(customer) {
    var sum = 0;
    customer.Orders.forEach(function(order) {
      sum += order.amount;
    });
    return sum;
  }
  $scope.customerCheckedTotal = function(customer) {
    var sum = 0;
    customer.Orders.forEach(function(order) {
      if (order.select) sum += order.amount;
    });
    return sum;
  }


  $scope.chkselect_onchange = function(c, item) {
    var totalvalue = 0;
    var ordercount = 0;
    var customercount = 0;
    console.log(1);

    angular.forEach(c, function(cust) {
      angular.forEach(cust.Orders, function(order) {
        if (cust.select == true) {
          if (order.amount != 0) {
            order.select = true;
          } else {
            order.select = false;
          }
        } else {
          order.select = false;
        }
      })
    })
  }

});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div ng-app="MyApp" ng-controller="MyController">
  <div class="container" style="margin-top:40px;">
    <div class="row">
      <div class="col-md-12">
        <table class="table table-condensed table-bordered table-hover">
          <thead>
            <tr>
              <td></td>
              <th>Customer Id</th>
              <th>Name</th>
              <th>Country</th>
              <th>Orders</th>
            </tr>
          </thead>
          <tbody ng-repeat="c in Customers">
            <tr>
              <td>
                <input id="mainCheck" type="checkbox" ng-change="chkselect_onchange(Customers,c)" ng-model="c.select" /></td>
              <td>{{c.CustomerId}}</td>
              <td>{{c.Name}}</td>
              <td>{{c.Country}}</td>
              <td>
                <table class="table table-condensed table-bordered">
                  <thead>
                    <tr>
                      <th></th>
                      <th>Order Id</th>
                      <th>Freight</th>
                      <th>ShipCountry</th>
                      <th>Amount</th>
                    </tr>
                  </thead>
                  <tbody ng-repeat="o in c.Orders">
                    <tr>
                      <td>
                        <input id="subCheck" type="checkbox" ng-change="chklotselect_onchange(Customers)" ng-model="o.select" /></td>
                      <td>{{o.OrderId}}</td>
                      <td>{{o.Freight}}</td>
                      <td>{{o.ShipCountry}}</td>
                      <td>{{o.amount}}</td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="2">Checked Total: {{customerCheckedTotal(c)}}</td>
                      <td></td>
                      <td colspan="2"><span class="pull-right">Total:{{customerTotal(c)}}</span> </td>
                    </tr>
                  </tfoot>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>