Angular 1.x如何实现行列均动态的表格展示？

Let's fix this to build the fully dynamic table you need—where columns are fund codes (pulled from the name field) and rows represent the three data types: Application, Redemption, Net.

Step 1: Restructure Your Data in the Controller #

First, we need to transform your original cashflows array into a format that plays nicely with dynamic rows and columns. We'll create an array of row objects (one for each data type) and extract a list of fund codes for headers.

Add this to your Angular controller:

// Your original cashflows data
$scope.cashflows = [
  { name: 'VBIF', application: 1000, redemption: -200, netAppRed: 800 },
  { name: 'VCIF', application: 1500, redemption: -200, netAppRed: 800 },
  { name: 'VMPF', application: 2000, redemption: 0, netAppRed: 2000 },
  { name: 'VBIF-A', application: 800, redemption: 100, netAppRed: 700 },
  { name: 'VMPF-A', application: 43540, redemption: 12550, netAppRed: 30990 }
];

// Transform data to support dynamic rows/columns
$scope.tableRows = [
  {
    label: 'Application',
    fundValues: $scope.cashflows.reduce((acc, fund) => {
      acc[fund.name] = fund.application;
      return acc;
    }, {})
  },
  {
    label: 'Redemption',
    fundValues: $scope.cashflows.reduce((acc, fund) => {
      acc[fund.name] = fund.redemption;
      return acc;
    }, {})
  },
  {
    label: 'Net',
    fundValues: $scope.cashflows.reduce((acc, fund) => {
      acc[fund.name] = fund.netAppRed;
      return acc;
    }, {})
  }
];

// Extract fund codes for dynamic headers
$scope.fundCodes = $scope.cashflows.map(fund => fund.name);

Step 2: Update the HTML Template #

Now modify your template to render dynamic headers and rows using the restructured data:

<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Data Type</th>
        <!-- Dynamic fund code columns -->
        <th data-ng-repeat="code in fundCodes">{{code}}</th>
      </tr>
    </thead>
    <tbody>
      <!-- Dynamic rows for each data type -->
      <tr data-ng-repeat="row in tableRows">
        <td>{{row.label}}</td>
        <!-- Dynamic values for each fund -->
        <td data-ng-repeat="code in fundCodes">
          {{row.fundValues[code] | currency}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

What This Does #

• Dynamic Columns: The fundCodes array pulls all fund names from your original data, so adding a new fund will automatically add a new column.
• Dynamic Rows: The tableRows array defines each row's label and maps each fund's value to its code, making it easy to look up and render values in the template.
• Scalability: If you ever need to add a new data type (like "Fees"), just add a new object to the tableRows array with the corresponding field from your cashflows data.

内容的提问来源于stack exchange，提问作者P.D