AngularJS过滤器问题：过滤后md-card与md-toolbar无法隐藏

看起来你遇到的核心问题是：卡片的显示逻辑只考虑了搜索框的过滤，没有同步复选框的自定义过滤规则，所以即使表格里的行被复选框过滤空了，md-card和toolbar依然会显示。

直接修改方案：对齐卡片和表格的过滤逻辑 #

你需要把md-card的ng-show表达式调整成和表格<tr>里完全一致的过滤流程，这样才能准确判断卡片是否有内容需要展示。

修改前的ng-show：

ng-show="(account|filter:searchName).length > 0"

修改后的ng-show（和表格的过滤步骤完全对齐）：

ng-show="(account | filter:searchName | toArray | customFilter:(technologyArray|filter:{on:true})).length > 0"

这样修改后，卡片会同时检查搜索过滤和复选框过滤后的结果长度，只有当两者过滤后还有数据时，卡片才会显示。

为什么原来的修改没生效？ #

你之前尝试的ng-show="(account|filter:searchName).length > 0 | customFilter:(technologyArray|filter:{on:true})"是错误的——管道符|的优先级是从左到右，你相当于把(account|filter:searchName).length > 0这个布尔值传给了customFilter，这显然不是你想要的逻辑，所以没生效。

优化建议：用控制器函数简化模板逻辑 #

如果觉得模板里的表达式太长，不好维护，可以在控制器里封装一个判断函数：

首先注入$filter服务：

app.controller('YourController', function($scope, $filter) {
  // 你的现有代码...

  $scope.shouldDisplayCard = function(account) {
    // 复制表格的过滤流程
    const searchFiltered = $filter('filter')(account, $scope.searchName);
    const convertedToArray = $filter('toArray')(searchFiltered);
    const checkboxFiltered = $filter('customFilter')(
      convertedToArray, 
      $filter('filter')($scope.technologyArray, {on: true})
    );
    return checkboxFiltered.length > 0;
  };
});

然后在模板里直接调用这个函数：

<md-card flex="45" flex-sm="100" flex-md="100" flex-xs="100" 
         ng-show="shouldDisplayCard(account)" 
         ng-repeat="account in containers | groupBy: 'accountId' | toArray | filter:searchName">

这种方式更清晰，后续如果过滤逻辑有变化，只需要修改控制器里的函数即可，不用在模板里改长长的表达式。

最后，记得检查你的customFilter实现是否正确，确保它能根据选中的technologyArray项正确过滤容器数据，这是整个逻辑生效的前提。

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