Angular项目中实现子表格独立计算复选框选中金额合计

Hey there! Let's fix that annoying issue where all your sub-tables are syncing their selected total values. The core problem here is that you're likely using a single global variable in your controller to track the total across all tables—we just need to isolate each table's total calculation instead.

Here's how to make each sub-table calculate its own selected total independently: #

1. Refactor your data structure to include table-specific totals

First, update your sub-table data to add a selectedTotal property to each table object. This way, every table has its own dedicated space to store its calculated total.

2. Update your controller logic to target individual tables

Modify your total calculation function to accept the current table as a parameter, so it only updates that specific table's total.

3. Bind the template to the table-specific total

In your HTML template, reference the table's own selectedTotal instead of a global variable.

Code Example #

Controller Code

var app = angular.module('MyApp', []);
app.controller('MainCtrl', function($scope) {
  // Sample sub-table data with individual selectedTotal properties
  $scope.subTables = [
    {
      id: 1,
      tableName: "Sub Table 1",
      rows: [
        { id: 101, amount: 150, isSelected: false },
        { id: 102, amount: 280, isSelected: false },
        { id: 103, amount: 90, isSelected: false }
      ],
      selectedTotal: 0 // Independent total for this table
    },
    {
      id: 2,
      tableName: "Sub Table 2",
      rows: [
        { id: 201, amount: 320, isSelected: false },
        { id: 202, amount: 175, isSelected: false }
      ],
      selectedTotal: 0 // Independent total for this table
    }
  ];

  // Calculate total only for the passed-in table
  $scope.calculateTableTotal = function(targetTable) {
    targetTable.selectedTotal = targetTable.rows.reduce((sum, row) => {
      return row.isSelected ? sum + row.amount : sum;
    }, 0);
  };
});

Template Code

<div ng-app="MyApp" ng-controller="MainCtrl">
  <!-- Repeat over each sub-table -->
  <div ng-repeat="table in subTables" class="sub-table-container">
    <h4>{{table.tableName}}</h4>
    <table border="1">
      <thead>
        <tr>
          <th>Select</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in table.rows">
          <td>
            <input 
              type="checkbox" 
              ng-model="row.isSelected" 
              ng-change="calculateTableTotal(table)"
            >
          </td>
          <td>${{row.amount}}</td>
        </tr>
      </tbody>
    </table>
    <!-- Bind to the table's own selectedTotal -->
    <p><strong>Selected Total:</strong> ${{table.selectedTotal}}</p>
  </div>
</div>

Why this works: #

Previously, you were probably updating a single $scope.selectedTotal variable that all tables shared. Now, each table has its own selectedTotal property, and the calculateTableTotal function only modifies the total for the specific table that triggered the checkbox change. This keeps each table's calculation completely independent.

Quick Notes: #

• If you're loading sub-tables dynamically (e.g., via an API call), make sure to initialize the selectedTotal property to 0 for every new table you add to the subTables array.
• If you're using a third-party table component (like ngTable), the same logic applies—attach the selectedTotal to each table's configuration object and bind to that in your template.

内容的提问来源于stack exchange，提问作者PK-1825