javascript - 在 ng-repeat 中动态应用格式化过滤器

Question

我的目标是应用设置为循环对象属性的格式过滤器。

取这个对象数组:

[
  {
    "value": "test value with null formatter",
    "formatter": null,
  },
  {
    "value": "uppercase text",
    "formatter": "uppercase",
  },
  {
    "value": "2014-01-01",
    "formatter": "date",
  }
]

我正在尝试编写的模板代码是这样的:

<div ng-repeat="row in list">
    {{ row.value | row.formatter }}
</div>

我是 期待看到这个结果 :

test value with null formatter
UPPERCASE TEXT
Jan 1, 2014

但也许很明显这段代码会引发错误:

Unknown provider: row.formatterFilterProvider <- row.formatterFilter

我无法想象如何解析 {{ }}; 中的“格式化程序”参数；谁能帮我？

见 plunkr http://plnkr.co/edit/YnCR123dRQRqm3owQLcs?p=preview

Answer 1

|是一个 Angular 构造，它找到具有该名称的已定义过滤器并将其应用于左侧的值。我认为您需要做的是创建一个将过滤器名称作为参数的过滤器，然后调用适当的过滤器 (fiddle) (改编自 M59 的代码):

HTML:

<div ng-repeat="row in list">
    {{ row.value | picker:row.formatter }}
</div>

Javascript:

app.filter('picker', function($filter) {
  return function(value, filterName) {
    return $filter(filterName)(value);
  };
});

感谢@karlgold 的评论，这是一个支持参数的版本。第一个示例使用 add直接过滤以将数字添加到现有数字，第二个使用 useFilter筛选以选择 add按字符串过滤并将参数传递给它 (fiddle) :

HTML:

<p>2 + 3 + 5 = {{ 2 | add:3:5 }}</p>
<p>7 + 9 + 11 = {{ 7 | useFilter:'add':9:11 }}</p>

Javascript:

app.filter('useFilter', function($filter) {
    return function() {
        var filterName = [].splice.call(arguments, 1, 1)[0];
        return $filter(filterName).apply(null, arguments);
    };
});