AngularJS自定义复选框过滤器问题：md-card与md-table无法隐藏

我来帮你搞定这个复选框过滤的问题，看起来核心问题出在过滤器的逻辑和数据匹配上，咱们一步步来修复：

你提到item[0].containerId的写法有误，这确实是关键问题。首先得明确：你要过滤的md-card/md-table数据源（也就是过滤器里的input参数），每个item应该是直接包含containerId的对象，不是数组，所以根本不需要item[0]这种写法。另外，你原来的过滤器还没判断复选框是否被选中，而且会重复添加匹配项，咱们改一下：

.filter('customFilter', function() {
  return function(input, techs) {
    // 先把所有被勾选的containerId挑出来
    const selectedIds = techs?.filter(tech => tech.on).map(tech => tech.containerId) || [];
    
    // 如果没勾选任何复选框，直接返回全部内容
    if (selectedIds.length === 0) return input;
    
    // 只保留containerId在选中列表里的项
    return input.filter(item => selectedIds.includes(item.containerId));
  }
})

这样改的好处：

• 先筛选出用户勾选的技术ID，避免无效判断
• 空选时默认显示全部，符合常规交互逻辑
• 用数组的filter和includes方法，逻辑更清晰，还不会重复添加数据

你的复选框代码是对的，只要确保technologyArray是挂在$scope上的全局变量，和过滤器接收的techs是同一个数据源就行：

<ul>
  <li ng-repeat="tech in technologyArray">
    <label>
      <input type="checkbox" ng-model="tech.on">{{tech.containerId}}
    </label>
  </li>
</ul>

假设你的md-card数据源是cardList，md-table的数据源是tableRows（记得换成你自己实际的变量名），把过滤器加到ng-repeat里：

md-card示例： #

<md-card ng-repeat="card in cardList | customFilter:technologyArray">
  <!-- 这里放你的卡片内容 -->
</md-card>

md-table示例： #

<md-table>
  <md-table-row ng-repeat="row in tableRows | customFilter:technologyArray">
    <!-- 这里放你的表格行内容 -->
  </md-table-row>
</md-table>

最后要确认你的卡片/表格数据源里的每个对象，都有containerId字段，而且和technologyArray里的containerId是对应的。比如你的数据源应该是这样的：

$scope.cardList = [
  { containerId: "7519183", title: "技术A卡片" },
  { containerId: "8031029", title: "技术B卡片" },
  // 更多数据...
];

这样改完之后，勾选复选框时对应的卡片和表格行就会显示，取消勾选就隐藏；所有复选框都不选的时候，全部内容都会正常展示啦。

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