Angular UI-Grid单过滤器异常：仅匹配2个字符，无法匹配完整字符串

看起来你遇到了一个自定义过滤逻辑的常见问题——你的refreshData函数里的匹配规则应该被限制成只对比前两位字符了，所以输入完整值时反而找不到匹配项。我来帮你修复这个问题：

先排查错误原因 #

你大概率是在过滤时写了类似substring(0,2)的逻辑，只截取了数据列的前两位和搜索文本对比，比如这种错误写法：

// 错误示例：仅匹配前2个字符
$scope.refreshData = function(searchText) {
  $scope.gridOptions.data = originalData.filter(item => {
    return item.targetColumn.substring(0, 2) === searchText.substring(0, 2);
  });
};

这种写法会导致只有当搜索文本的前两位和列值前两位一致时才匹配，输入完整值自然就找不到结果了。

正确的自定义过滤方案 #

方案1：使用indexOf做包含匹配（不区分大小写） #

首先要注意保存原始数据，避免多次过滤后丢失数据，然后修改过滤逻辑为检查列值是否包含搜索文本：

// 初始化时保存原始数据（替换成你的实际数据源）
$scope.originalGridData = [...yourInitialDataSource];

$scope.refreshData = function(searchText) {
  // 搜索文本为空时恢复全部数据
  if (!searchText) {
    $scope.gridOptions.data = [...$scope.originalGridData];
    return;
  }

  const lowerSearchStr = searchText.toLowerCase();
  $scope.gridOptions.data = $scope.originalGridData.filter(item => {
    // 替换成你要过滤的列名，比如 item.name / item.id
    // 多列过滤可以用 || 连接：item.name.toLowerCase().indexOf(...) !== -1 || item.code.toLowerCase().indexOf(...) !== -1
    return item.targetColumn.toLowerCase().indexOf(lowerSearchStr) !== -1;
  });
};

方案2：使用正则实现更灵活的匹配 #

如果需要支持模糊匹配、不区分大小写等更灵活的规则，可以用正则表达式：

$scope.originalGridData = [...yourInitialDataSource];

$scope.refreshData = function(searchText) {
  if (!searchText) {
    $scope.gridOptions.data = [...$scope.originalGridData];
    return;
  }

  // 'gi' 表示全局匹配+不区分大小写
  const matchRegex = new RegExp(searchText, 'gi');
  $scope.gridOptions.data = $scope.originalGridData.filter(item => {
    return matchRegex.test(item.targetColumn);
  });
};

更省心的替代方案：使用UI-Grid自带过滤 #

其实Angular UI-Grid本身就内置了过滤功能，完全不用自己写input和refreshData函数，配置起来更简单：

$scope.gridOptions = {
  enableFiltering: true, // 开启全局过滤
  columnDefs: [
    { 
      field: 'targetColumn', 
      displayName: '你的列名', 
      enableFiltering: true // 单独开启该列的过滤
    },
    // 其他列配置...
  ],
  // 你的其他grid配置：pagination、data等
};

这样UI-Grid会自动在表头生成过滤输入框，支持全局和单列过滤，功能更完善也不容易出错。

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