自定义过滤器使用后数组对象更新异常问题咨询

这个问题我之前也踩过坑，核心原因是你的自定义过滤器返回了新的对象/数组实例，导致$scope.myobj和原$scope.origObj的引用完全断开了。当你修改过滤后的对象时，其实只是在修改副本，原数据根本没同步；如果之后isSelected切换回false，$scope.myobj切回原数组，之前的修改自然就看不到了。

下面给你几个可行的解决方案，按优雅程度排序：

1. 让过滤器返回原对象的引用（优先推荐） #

如果你的过滤逻辑只是筛选数组元素（比如挑出符合条件的项），而不是转换对象结构，那直接用Array.filter()实现过滤器——它返回的是原数组元素的引用，不会创建新对象。

示例过滤器代码：

app.filter('customFilter', function() {
  return function(items) {
    // 这里写你的筛选逻辑，比如只保留isActive为true的项
    return items.filter(function(item) {
      return item.isActive;
    });
  };
});

这样当isSelected为true时，$scope.myobj指向的是原数组的子集，里面的对象和$scope.origObj里的对象是同一个引用。你修改这些对象时，会直接作用到原数据上，不管isSelected怎么切换，修改都会保留。

2. 在ng-repeat中直接使用带参数的过滤器 #

如果你的过滤器需要转换对象（比如添加临时属性），那不要提前把过滤结果赋值给$scope.myobj，而是把isSelected作为参数传给过滤器，直接在ng-repeat里使用：

模板代码： #

<div ng-repeat="item in origObj | customFilter:isSelected">
  <!-- 这里的item是原对象的引用，修改会直接同步到origObj -->
  <input ng-model="item.name" placeholder="修改名称" />
</div>

过滤器代码： #

app.filter('customFilter', function() {
  return function(items, applyFilter) {
    // 如果不需要过滤，直接返回原数组
    if (!applyFilter) return items;
    
    // 过滤逻辑：如果要添加临时属性，直接修改原对象（不要新建对象）
    return items.map(function(item) {
      item._tempFlag = true; // 示例：添加临时标记
      return item;
    });
  };
});

这种方式的好处是，ng-repeat始终绑定原对象的引用，修改操作不会丢失，同时也避免了手动管理$scope.myobj的麻烦。

3. 手动同步过滤对象和原对象（备选方案） #

如果必须提前过滤并赋值给$scope.myobj，那你需要在修改过滤后的对象时，手动同步到原数组中。比如通过唯一标识（如id）找到原对象，再把修改的属性同步过去：

// 假设你有一个修改对象的方法
$scope.saveModifiedItem = function(modifiedItem) {
  // 在原数组中找到对应元素
  const originalItem = $scope.origObj.find(item => item.id === modifiedItem.id);
  if (originalItem) {
    // 把修改的属性同步到原对象
    angular.extend(originalItem, modifiedItem);
  }
};

这种方法比较繁琐，适合过滤逻辑特别复杂、无法用前两种方案的场景。

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