AngularJS中ng-repeat结合ng-if实现过滤及取消过滤的问题

我懂你遇到的问题了——当你想切换到「显示全部」时，原来的ng-if逻辑因为只判断了匹配过滤值的情况，导致所有行都被隐藏了对吧？这是因为你没给「禁用过滤」的情况加个分支判断，下面给你几种简单有效的解决办法：

方法一：直接修改ng-if的逻辑判断 #

最直接的方式是在ng-if里加入「过滤值为空/为全部标识时显示所有行」的逻辑。假设你的选择框绑定的ng-model是selectedFilter，预定义选项里给「全部」对应的值设为空字符串：

视图代码 #

<!-- 选择框添加「全部」选项 -->
<select ng-model="selectedFilter">
  <option value="">全部</option>
  <option value="分类A">分类A</option>
  <option value="分类B">分类B</option>
  <!-- 其他预定义过滤选项 -->
</select>

<!-- 表格行的ng-if修改逻辑 -->
<tr ng-repeat="item in yourObjectList" 
    ng-if="!selectedFilter || item.targetProperty === selectedFilter">
  <td>{{item.property1}}</td>
  <td>{{item.property2}}</td>
  <!-- 其他表格单元格 -->
</tr>

逻辑说明 #

• 当选择「全部」时，selectedFilter是空字符串，!selectedFilter为true，整个ng-if条件成立，所有行都会显示。
• 当选择具体过滤值时，会判断item.targetProperty是否和selectedFilter匹配，只显示符合条件的行。

方法二：把过滤逻辑抽到控制器函数（更易维护） #

如果你的过滤逻辑比较复杂（比如要匹配多个字段），把判断逻辑放到控制器的函数里会更清晰，也方便后续修改：

控制器代码 #

angular.module('yourApp').controller('YourController', function($scope) {
  // 你的对象列表数据
  $scope.yourObjectList = [/* 你的示例数据 */];

  // 定义过滤判断函数
  $scope.shouldShowItem = function(item) {
    // 没有选择过滤条件时，返回true显示所有
    if (!$scope.selectedFilter) {
      return true;
    }
    // 否则执行匹配逻辑
    return item.targetProperty === $scope.selectedFilter;
  };
});

视图代码 #

<tr ng-repeat="item in yourObjectList" ng-if="shouldShowItem(item)">
  <!-- 表格内容 -->
</tr>

方法三：使用AngularJS内置的filter过滤器（推荐） #

其实AngularJS本身就提供了filter过滤器来处理ng-repeat的数据过滤，比用ng-if更符合框架设计，性能也更优（因为是在数据层面过滤后再渲染DOM）：

视图代码 #

<select ng-model="selectedFilter">
  <option value="">全部</option>
  <option value="分类A">分类A</option>
  <option value="分类B">分类B</option>
</select>

<tr ng-repeat="item in yourObjectList | filter: { targetProperty: selectedFilter || '' }">
  <!-- 表格内容 -->
</tr>

逻辑说明 #

当selectedFilter为空时，filter: { targetProperty: '' }会匹配所有项，因为空字符串作为过滤器会匹配任意值；当选择具体值时，只匹配对应属性等于该值的项。

如果需要更复杂的自定义过滤逻辑，还可以创建自定义过滤器：

自定义过滤器代码

angular.module('yourApp').filter('customItemFilter', function() {
  return function(items, filterValue) {
    // 没有过滤值时返回所有数据
    if (!filterValue) {
      return items;
    }
    // 否则过滤出符合条件的项
    return items.filter(function(item) {
      return item.targetProperty === filterValue;
    });
  };
});

使用自定义过滤器的视图代码

<tr ng-repeat="item in yourObjectList | customItemFilter: selectedFilter">
  <!-- 表格内容 -->
</tr>

总结 #

核心问题就是你原来的ng-if没有处理「禁用过滤」的分支，只要给逻辑加上「当过滤值为空/为全部标识时显示所有」的判断，就能解决问题。如果是简单过滤，直接修改ng-if或者用内置filter就够了；复杂逻辑的话，抽成控制器函数或自定义过滤器会更易维护。

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