ng-repeat过滤器异常：选择CategoryTypeId=1时混入ID=10的项

这个问题其实是AngularJS内置filter的默认匹配规则导致的——它默认做的是模糊子字符串匹配，而不是你预期的精确等值匹配！

为什么会出现这个现象？ #

当你过滤CategoryTypeId: 1（不管是数字还是字符串类型），AngularJS的内置filter会检查每个instrument的CategoryTypeId是否包含"1"这个内容：

• 对于CategoryTypeId=1，显然包含"1"，会被匹配；
• 对于CategoryTypeId=10，它的字符串形式是"10"，同样包含"1"，所以也会被匹配出来。
  而当你过滤CategoryTypeId=10时，只有内容包含"10"的项才会被匹配，所以只有ID=10的项显示，这就符合预期了。

哪怕你硬编码{ CategoryTypeId : '1'}，因为默认还是模糊匹配，"10"里的"1"依然会被命中，所以问题依旧存在。

解决方法 #

有几种简单的方式可以解决这个问题：

1. 开启严格匹配模式

AngularJS的filter支持第三个参数true，开启后会强制精确等值匹配（包括类型匹配，比如数字1不会匹配字符串"1"），修改你的代码如下：

ng-repeat="instrument in Instruments | filter : (!systemTypeCatgory?'': {CategoryTypeId : systemTypeCatgory}) : true"

这个方法最简单，也是优先推荐的方案。

2. 确保过滤条件与目标字段的类型一致

如果CategoryTypeId是数据库返回的数字类型，要确保systemTypeCatgory也是数字类型（而不是字符串）。比如在下拉框的ng-value中直接绑定数字，而不是字符串：

<select ng-model="systemTypeCatgory">
  <option ng-value="1">分类1</option>
  <option ng-value="10">分类10</option>
</select>

配合严格匹配使用，能彻底避免类型不匹配导致的意外问题。

3. 自定义精确匹配过滤器

如果内置的严格匹配满足不了你的需求（比如需要更复杂的匹配逻辑），可以自定义一个过滤器：

// 在你的AngularJS模块中注册过滤器
angular.module('yourApp').filter('exactCategoryMatch', function() {
  return function(instruments, categoryId) {
    // 如果没有选择分类，返回所有仪器
    if (!categoryId) return instruments;
    // 精确匹配CategoryTypeId
    return instruments.filter(function(instrument) {
      return instrument.CategoryTypeId === categoryId;
    });
  };
});

然后在模板中使用：

ng-repeat="instrument in Instruments | exactCategoryMatch : systemTypeCatgory"

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