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

我正在尝试基于复选框选择来计算已检查的总金额，如果选中复选框，则应该添加总价值。我在下面也添加了屏幕截图，因为我已经明确解释了，请仔细阅读。在我的主要项目中，如果我单击其他表，则在每个子表中都将显示“已检查的总数”，所有表的已检查的总数将会更改，但是您要显示单个表的检查总数。

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

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>

参考方案

您必须将自定义方法添加到$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>

Telerik单选按钮所需的字段验证器 - javascript

如何设置Telerik单选按钮所需的字段验证器？我想在按钮单击“ BtnSave”上设置必填字段验证器吗？请帮忙！<telerik:RadButton ID="radio_male" runat="server" ToggleType="Radio" AutoPostBack="fa…

在PHP文件中调用javascript函数并在加载HTML文件之后？ - javascript

我需要在我的php中调用js函数，但无法正常工作。有人可以告诉我我在做什么错吗？我该如何轻松地做到这一点？谢谢！我有三个文件：  mail.php负责发送$ _POST的内容（工作正常）。我调用我的javascript函数来切换模式，具体取决于邮件是否已发送。 <? ... $response = $sendgrid->send($email);…

如何在Django中进行多次更新？ - javascript

我试图通过选中复选框然后按“更新”按钮来在django中进行多次更新。这是我的view.pydef update_kel_stat(request, id, kelid): if request.method == "POST": cursor = connection.cursor() sql = "UPDATE keluar…

如何使用PHP从动态输入字段捕获数组值？ - javascript

我正在编写一个在线时间跟踪网页，允许用户将学习时间输入该系统。用户将首先输入名称，然后根据日期输入学习时间。一天中可能会有多个学习时间。以下是我第一页的编码，<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"…

使用php重新加载内容 - javascript

在对网站进行编程时，我以前使用过此代码，它可以完美工作，但是现在当我想使用一些Flash部件时，每次单击链接时，它都会重新加载所有网站。源代码： <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…

推荐标签：, , ,

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在…

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在看。自己强行看了两个月，全部给看完了。感觉这文笔也就我读初中的水平……而且写着国内的一些情况，外国人能理解吗？这书为什么会这么火？这水平我也可以去写呀[笑哭][笑哭][笑哭] 招商银行员工：可以写赶紧写一个啊，能拿科幻文学雨果奖。 包清白：哦 楼主：pei ！tui ！你也配姓龙 楼主：@赵龙王 呵呵 […]