Angular控制器中修改过滤器返回过滤值的实现方法

方案1：控制器/组件内处理后绑定（最推荐） #

直接在逻辑层调用过滤器拿到原始结果，按条件修改后再绑定到视图，逻辑清晰方便维护。

1. 首先将SugNechesRcsFilter注入到对应的控制器/组件中
2. 调用过滤器获取原始返回值后做条件替换

示例代码（AngularJS 版本）：

app.controller('YourController', ['SugNechesRcsFilter', function(SugNechesRcsFilter) {
  const vm = this;
  vm.currSugNeches = 你的业务原始数据;
  const condition = 你的判断条件;

  // 调用过滤器获取原始结果
  let filterRes = SugNechesRcsFilter(vm.currSugNeches, 'info');
  // 按条件替换
  if (condition && filterRes === 'John') {
    filterRes = 'John Doe';
  }
  // 绑定到视图的变量
  vm.displayText = filterRes;
}]);

模板代码简化为直接绑定处理后的变量：

<div class="col-sm-10">
  {{ vm.displayText }}
</div>

方案2：模板内直接做判断（适合简单逻辑） #

如果替换逻辑非常简单，不想修改逻辑层代码，可以直接在模板中写条件表达式：

<div class="col-sm-10">
  {{ 
    condition && (vm.currSugNeches | SugNechesRcsFilter: 'info') === 'John' 
    ? 'John Doe' 
    : (vm.currSugNeches | SugNechesRcsFilter: 'info') 
  }}
</div>

方案3：扩展原有过滤器（适合多场景复用） #

如果这个替换逻辑需要在多个地方用到，可以直接给原过滤器新增可选参数控制输出：

// 调整原SugNechesRcsFilter过滤器逻辑
app.filter('SugNechesRcsFilter', function() {
  return function(input, type, enableFullName = false) {
    // 保留原有过滤逻辑，拿到原始返回值
    const originResult = 原有过滤逻辑的返回值;
    // 新增替换逻辑
    if (enableFullName && originResult === 'John') {
      return 'John Doe';
    }
    return originResult;
  }
})

调用时直接传入条件作为第三个参数即可：

<div class="col-sm-10">
  {{ vm.currSugNeches | SugNechesRcsFilter: 'info': condition }}
</div>

如果你使用的是Angular 2及以上版本，调用管道的逻辑类似，只需在组件中注入对应管道实例，调用transform方法拿到原始结果后做替换即可。

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