AngularJS下拉框筛选表格问题：选中All时无法显示全部数据

Let's break down why your current setup isn't working as expected, then fix it step by step.

The Problem #

Right now, you're using Angular's built-in filter:recat which tries to match every property of each item in rabanalysisreport against the value of recat. When you select "All" (value 0), it's looking for items where any property equals 0—but your Male/Female entries have Id values 1 and 2, so nothing matches. That's why you're only seeing single-gender results when you select specific categories, and incorrect (or no) results when you pick "All".

The Solution #

You need custom filter logic that treats 0 as a "show all" flag. Here are two straightforward ways to implement this:

Option 1: Inline Conditional Filter (Quick Fix) #

Modify your ng-repeat to check if recat is 0 first. If it is, skip filtering entirely; otherwise, filter explicitly by the Id property (since your ng-options maps r.Id to the recat model):

<tr ng-repeat="r in rabanalysisreport | filter: (recat === '0' ? '' : {Id: recat})">
  <!-- Your table data here -->
</tr>

Note: I used '0' instead of 0 because your option value is string:0—Angular stores this as a string in recat. If your Id values are numbers, adjust the comparison to use 0 instead of '0'.

Option 2: Custom Filter Function (Scalable) #

If you anticipate adding more filter logic later, a controller-side filter function is cleaner and easier to maintain.

First, add this function to your Angular controller:

$scope.filterByCategory = function(item) {
  // If "All" is selected, return all items
  if ($scope.recat === '0') {
    return true;
  }
  // Otherwise, match the item's Id to the selected category
  return item.Id === $scope.recat;
};

Then update your ng-repeat to use this custom function:

<tr ng-repeat="r in rabanalysisreport | filter:filterByCategory">
  <!-- Your table data here -->
</tr>

Key Notes to Verify #

• Ensure the Id property in your rabanalysisreport items matches the data type of recat (string vs number). Since your select options use string:1/string:2, recat will be a string—if your item.Id is a number, adjust the filter to convert values (e.g., parseInt($scope.recat) in the function).
• Both solutions prioritize the "All" case first, ensuring all records are shown when that option is selected, then fall back to filtering by the selected category Id for other options.

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