AngularJS中ng-repeat多选框过滤器失效及年龄范围过滤异常排查

我一眼就揪出问题所在了！问题出在child和young这两个过滤器的逻辑写法上，咱们来一步步拆解：

错误原因分析 #

你在这两个过滤器里用&&连接了两次filter()的结果，比如：

items.filter(x=>x.age>=5) && items.filter(x=>x.age<=14)

但filter()返回的是数组，在JavaScript里非空数组会被视为true。所以数组A && 数组B的结果其实是直接返回数组B，完全忽略了数组A的过滤条件！这就导致child过滤器实际只筛选了age<=14的项，young过滤器只筛选了age<=17的项，和你预期的范围过滤完全不符。

修正后的过滤器代码 #

正确的做法是在同一个filter()回调里同时写两个条件，这样才能筛选出同时满足两个范围的项。修正后的完整代码如下：

.filter('five', function () {
  return function (items, filter) {
    if(filter) return items.filter(x => x.age <= 4);
    else return items;
  }
})
.filter('child', function () {
  return function (items, filter) {
    if(filter) return items.filter(x => x.age >=5 && x.age <=14); // 合并范围条件
    else return items;
  }
})
.filter('young', function () {
  return function (items, filter) {
    if(filter) return items.filter(x => x.age >=14 && x.age <=17); // 合并范围条件
    else return items;
  }
})
.filter('adult', function () {
  return function (items, filter) {
    if(filter) return items.filter(x => x.age >=18); // 补充你未写完的成人过滤逻辑
    else return items;
  }
})

额外优化小建议 #

• 可以把年龄范围抽成常量，方便后续维护，比如：

  const AGE_RANGES = {
    five: { max:4 },
    child: { min:5, max:14 },
    young: { min:14, max:17 },
    adult: { min:18 }
  };
  

  之后在过滤器里直接引用这些常量，减少硬编码的麻烦。
• 注意young过滤器的>=14和child的<=14存在重叠（14岁的项会被两个过滤器同时匹配），如果这不是你想要的，可以调整为child是<=13、young是>=14，避免范围重叠。

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