AngularJS Smart Table对转换后显示数据的过滤实现问题

优先推荐改动最小、实现成本最低的预扩展数据源方案，无需开发自定义Smart Table插件：

方案1：预转换数据源新增展示字段（首推） #

原理是在把原始交易数据赋值给st-safe-src对应的变量前，提前给每个交易对象新增存储转换后收款方名称的字段，直接用该字段做过滤和展示即可，同时还能降低ng-repeat重复调用转换方法的性能损耗。

控制器端代码修改 #

在你获取交易列表的逻辑后追加遍历处理逻辑：

// 假设这是你原来获取交易数据的代码
$scope.transactions = getOriginalTransactionsFromApi();
// 新增字段处理
$scope.transactions = $scope.transactions.map(function (item) {
  // 新增payeeName字段存储转换后的名称，不影响原有payee字段的UUID值
  item.payeeName = dbCtrl.getPayeeName(item.payee);
  return item;
});

模板端代码修改 #

<!-- 搜索框修改st-search绑定的字段为新增的payeeName -->
<div>
  <input st-search="payeeName" placeholder="搜索收款方" class="input-sm form-control" type="search"/>
</div>

<!-- 展示部分直接用新增字段，无需重复调用转换方法 -->
<div class="account__td" transaction-field-focus-name="payee">
  {{transaction.payeeName}}
</div>

方案2：自定义过滤函数（适合数据需实时转换的场景） #

如果你的收款方名称会动态变更，不能预存静态值，可以用Smart Table支持的自定义过滤规则，改动量也远小于开发自定义插件：

控制器端新增过滤方法 #

$scope.customPayeeFilter = function (transaction, searchKeyword) {
  // 搜索为空时全部展示
  if (!searchKeyword) return true;
  // 实时转换UUID为名称后匹配
  const payeeName = dbCtrl.getPayeeName(transaction.payee).toLowerCase();
  return payeeName.includes(searchKeyword.trim().toLowerCase());
};

模板端修改 #

给表格元素绑定自定义过滤函数，搜索框不指定绑定字段即可触发全局自定义过滤：

<div class="account"
     st-table="displayedTransactions"
     st-safe-src="transactions"
     st-filter="customPayeeFilter"
     disable-ng-animate>
  <!-- 搜索框去掉st-search的字段指定 -->
  <div>
    <input st-search placeholder="搜索收款方" class="input-sm form-control" type="search"/>
  </div>
</div>

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