基于Angular实现复选框触发的表格数据筛选需求

Got it, let's break down how to build this filtering functionality for your table using Angular. I'll keep it aligned with your existing checkbox setup while making sure the logic is clean and maintainable.

Step 1: Set Up Component Logic #

First, in your Angular component, you'll need to manage your original table data, track the filtered results, and handle the checkbox state changes. Here's the code you can drop into your component:

// Assume your table data has a field matching the first column (e.g., 'category' for A/B/C)
originalTableData = [
  { category: 'A', details: 'Row A-1' },
  { category: 'A', details: 'Row A-2' },
  { category: 'B', details: 'Row B-1' },
  { category: 'C', details: 'Row C-1' },
  { category: 'B', details: 'Row B-2' }
];

filteredTableData: any[] = [];
// Match your existing checkbox ng-models
A = false;
B = false;
C = false;

ngOnInit() {
  // Initialize with all data visible
  this.filteredTableData = [...this.originalTableData];
}

filterTable(): void {
  // Collect all selected categories from checkboxes
  const activeFilters: string[] = [];
  if (this.A) activeFilters.push('A');
  if (this.B) activeFilters.push('B');
  if (this.C) activeFilters.push('C');

  // Show all data if no checkboxes are selected
  if (activeFilters.length === 0) {
    this.filteredTableData = [...this.originalTableData];
    return;
  }

  // Filter data to only include rows where first column matches selected filters
  this.filteredTableData = this.originalTableData.filter(row => 
    activeFilters.includes(row.category)
  );
}

Note: Replace row.category with the actual field name from your table data that corresponds to the first column (e.g., row.firstColumnValue if that's what you use).

Step 2: Update Your Template #

Modify your existing checkbox HTML to trigger the filter function whenever a checkbox state changes, and bind your table to the filtered data set:

<!-- Your existing checkboxes, now with ng-change to trigger filtering -->
<div style="height:30px;width:60px;float:left">
  <input type="checkbox" ng-model="A" ng-change="filterTable()" />&nbsp;&nbsp;A
</div> 
<div style="height:30px;width:60px;float: left">
  <input type="checkbox" ng-model="B" ng-change="filterTable()" />&nbsp;&nbsp;B
</div> 
<div style="height:30px;width:60px;float:left">
  <input type="checkbox" ng-model="C" ng-change="filterTable()" />&nbsp;&nbsp;C
</div>

<!-- Your table, bound to the filtered data -->
<table border="1" style="clear:both; margin-top: 40px;">
  <thead>
    <tr>
      <th>First Column</th>
      <th>Other Data</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in filteredTableData">
      <td>{{row.category}}</td>
      <td>{{row.details}}</td>
    </tr>
  </tbody>
</table>

Step 3: Optional Improvements #

If you plan to add more filters later, clean up the checkbox state management by using an object instead of individual variables:

// Replace individual A/B/C variables with this object
selectedFilters = { A: false, B: false, C: false };

filterTable(): void {
  // Get all selected filter keys in one line
  const activeFilters = Object.keys(this.selectedFilters).filter(key => this.selectedFilters[key]);
  // Rest of the filter logic stays the same
}

Then update your checkboxes to use the object model:

<input type="checkbox" ng-model="selectedFilters.A" ng-change="filterTable()" />&nbsp;&nbsp;A

This makes your code more scalable as you add more filter options.

内容的提问来源于stack exchange，提问作者magneto