AngularJS如何针对拼接后的复合ID实现表格过滤？

要实现输入复合ID也能触发过滤的需求，AngularJS的内置filter指令没法直接处理这种多属性组合的匹配，我们需要自定义一个过滤器，同时保留原有的单属性过滤能力。

步骤1：创建自定义过滤器 #

在你的AngularJS模块中注册一个自定义过滤器，它会同时检查复合ID和单个属性是否匹配搜索文本：

angular.module('yourAppModuleName', [])
.filter('stockCompositeFilter', function($filter) {
  return function(stockItems, searchQuery) {
    // 如果没有搜索内容，直接返回所有数据
    if (!searchQuery) return stockItems;
    
    // 统一转成小写，实现不区分大小写的搜索
    const lowerQuery = searchQuery.toLowerCase();
    
    return stockItems.filter(item => {
      // 生成和模板中完全一致的复合ID字符串
      const compositeId = 
        item.ean + 
        $filter('date')(item.date, 'ddMM') + 
        (item.brand ? item.brand.substring(0, 3) : '');
      
      const lowerCompositeId = compositeId.toLowerCase();
      
      // 检查复合ID是否匹配，同时保留对单个属性的过滤支持
      const matchesComposite = lowerCompositeId.includes(lowerQuery);
      const matchesEan = (item.ean || '').toLowerCase().includes(lowerQuery);
      const matchesDate = $filter('date')(item.date, 'ddMM').toLowerCase().includes(lowerQuery);
      const matchesBrand = (item.brand || '').toLowerCase().includes(lowerQuery);
      
      // 满足任一条件就保留该条目
      return matchesComposite || matchesEan || matchesDate || matchesBrand;
    });
  };
});

步骤2：更新模板中的过滤逻辑 #

把原来的内置filter:Filter替换成我们的自定义过滤器，传递搜索框的Filter模型作为参数：

<tr ng-repeat="x in stock | stockCompositeFilter:Filter">
  <td>{{x.ean}}{{x.date| date:'ddMM'}}{{x.brand| limitTo : 3 : begin}}</td>
  <!-- 其他列内容 -->
</tr>

关键细节说明 #

• 复合ID的生成逻辑和模板完全一致，确保搜索时的匹配规则和显示的内容完全对应；
• 加入了空值处理（比如item.brand为空时的默认值），避免出现报错；
• 统一转成小写进行匹配，提升用户体验，不用区分大小写输入；
• 保留了对单个属性（ean、date、brand）的过滤支持，原来的搜索功能不受影响。

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