向AngularJS过滤器比较器传递完整对象及访问全属性的问题

嘿，这个问题我之前在做Angular项目的时候也踩过坑！默认情况下，当你用对象作为过滤表达式时，Angular的$filter('filter')只会把当前匹配的属性值传给比较器，确实没法直接拿到整个对象。不过有两个实用的办法可以解决这个问题：

方法一：改用过滤函数替代对象表达式 #

如果你不需要依赖Angular默认的属性匹配逻辑，直接把过滤表达式写成一个函数就行。这个函数会接收每个数组元素作为参数，你可以在里面随意访问它的所有属性，实现复杂的过滤逻辑：

// 示例：根据name搜索，同时判断age是否大于18
const searchTerm = 'John';
const filteredItems = $filter('filter')(yourArray, function(item) {
  // 这里item是完整的对象，可访问任意属性
  const matchesName = item.name.toLowerCase().includes(searchTerm.toLowerCase());
  const meetsAgeRequirement = item.age > 18;
  return matchesName && meetsAgeRequirement;
});

这种方式最直接，不需要额外折腾比较器，所有过滤逻辑都能集中写在这个函数里。

方法二：利用比较器的上下文（this）访问完整对象 #

如果你还是想用「对象表达式+自定义比较器」的组合，其实Angular在调用比较器的时候，会把当前的数组元素作为this上下文传进去！也就是说，你可以在比较器里通过this访问对象的所有其他属性：

function customComparator(actualPropValue, expectedFilterValue) {
  // this 指向当前的完整数组对象
  const matchesProp = actualPropValue.toLowerCase().includes(expectedFilterValue.toLowerCase());
  // 示例：额外判断age属性
  const meetsExtraCondition = this.age > 18;
  return matchesProp && meetsExtraCondition;
}

// 调用时依然使用对象表达式
const filteredItems = $filter('filter')(yourArray, {name: searchTerm}, customComparator);

⚠️ 注意：比较器一定要用普通函数声明，不能用箭头函数！因为箭头函数的this会绑定到外层上下文，无法拿到当前的数组元素。

内容的提问来源于stack exchange，提问作者Felipe Leão