AngularJS表格点击过滤问题：点击按钮筛选含weight的数据

看起来你已经搭好了过滤器的基础框架，但逻辑需要调整来匹配你的需求——只保留weight不为null的数据。我来帮你一步步修改：

1. 调整过滤器逻辑 #

你的现有过滤器是排除和传入值相等的项，我们把它改成根据开关状态过滤出weight非null的数据：

app.filter('eyeFilterFunction', function(){ 
  return function(data, shouldFilter) { 
    // 如果没有开启过滤，直接返回全部数据
    if (!shouldFilter) return data; 
    // 过滤出weight不为null的条目
    return data.filter(item => item.weight !== null);
    // 如果你需要同时排除undefined，也可以写成 item.weight != null
  }; 
});

这里用了数组的filter方法，比forEach更简洁，逻辑也更清晰。

2. 在控制器中添加过滤控制变量 #

在你的控制器里加一个开关变量，用来控制过滤是否生效，再写按钮的点击事件：

app.controller('MainCtrl', function($scope) {
  // 你的数据定义...
  $scope.items = [/* 你的数据数组 */];
  
  // 默认不开启过滤
  $scope.showOnlyWeighted = false;

  // 按钮点击触发过滤
  $scope.filterWeightedItems = function() {
    $scope.showOnlyWeighted = true;
    // 如果需要切换"显示全部/仅显示有weight"的功能，改成：
    // $scope.showOnlyWeighted = !$scope.showOnlyWeighted;
  };
});

3. 修改视图绑定 #

给按钮绑定点击事件，同时在表格的ng-repeat里应用过滤器：

<!-- 过滤按钮 -->
<button ng-click="filterWeightedItems()">仅显示含weight的数据</button>

<!-- 表格部分 -->
<table>
  <tr ng-repeat="item in items | eyeFilterFunction:showOnlyWeighted">
    <td>{{item.name}}</td>
    <td>{{item.weight}}</td>
    <!-- 其他列 -->
  </tr>
</table>

这样操作后，点击按钮时showOnlyWeighted会变为true，过滤器就会自动筛选出weight不为null的数据，隐藏那些weight为null的行。如果需要实现切换显示/隐藏的功能，只需要把控制器里的赋值改成取反即可。

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