Angular控制器变量传入自定义过滤器后$scope.unfiltered为空问题

核心原因：变量引用断裂 #

你遇到的问题本质是基本类型与引用类型的传递差异：

• 如果控制器里$scope.unfiltered初始是null/undefined，当你在过滤器里直接赋值（比如unfiltered = 未选中数组），相当于给过滤器的局部变量重新分配了内存地址，和控制器里的$scope.unfiltered彻底断开了引用关系——过滤器里的变量是新的，控制器里的还是原来的空值。
• 另外Angular过滤器被设计为纯函数，框架会对其执行做缓存、上下文隔离等优化，直接修改外部传入的变量本身就不符合设计规范，很容易出现状态不同步的问题。

可行解决方法 #

方法1：保持引用不变（快速修复） #

在控制器里把$scope.unfiltered初始化为空数组：

// 控制器里初始化
$scope.unfiltered = [];

然后在过滤器里不要直接赋值，而是清空原数组再填充内容：

app.filter('filterEthnicity', function() {
  return function(persons, ethnicity, unfiltered) {
    const matched = [];
    const unmatched = [];
    // 筛选逻辑：把符合的放matched，不符合的放unmatched
    persons.forEach(p => {
      if(p.ethnicity === ethnicity) {
        matched.push(p);
      } else {
        unmatched.push(p);
      }
    });
    // 修改原数组而非重新赋值
    unfiltered.length = 0; // 清空原数组
    unfiltered.push(...unmatched); // 填充未选中项
    // 返回排序后的结果（选中在前）
    return [...matched, ...unmatched];
  }
});

这样操作的是同一个数组引用，控制器里的$scope.unfiltered会同步更新。

方法2：遵循Angular设计规范（推荐） #

把筛选逻辑移到控制器或服务中，避免用过滤器修改外部状态：

// 控制器里监听筛选参数变化
$scope.$watchGroup(['height', 'age', 'ethnicity'], function(newVals) {
  const [height, age, ethnicity] = newVals;
  // 先执行所有筛选逻辑
  let filtered = angular.copy($scope.person);
  filtered = toArray(filtered); // 模拟toArray过滤器逻辑
  filtered = filterHeight(filtered, height); // 模拟filterHeight逻辑
  filtered = filterAge(filtered, age); // 模拟filterAge逻辑
  
  // 拆分选中和未选中项
  $scope.persons = filtered.filter(p => p.ethnicity === ethnicity);
  $scope.unfiltered = filtered.filter(p => p.ethnicity !== ethnicity);
  // 合并成选中在前的列表（如果需要）
  $scope.persons = [...$scope.persons, ...$scope.unfiltered];
});

然后HTML里直接使用：

<div ng-repeat="p in persons"></div>
<div ng-repeat="val in unfiltered"></div>

这种方式更符合Angular的数据流设计，也更容易维护和调试。

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