在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

我无法想象如何解析{{}}中的"formatter"参数; 谁能帮我？

请参阅plunkr http://plnkr.co/edit/YnCR123dRQRqm3owQLcs?p=preview

Answer 1

这|是一个角度构造,它找到具有该名称的已定义过滤器,并将其应用于左侧的值.我认为你需要做的是创建一个过滤器,将过滤器名称作为参数,然后调用适当的过滤器(小提琴)(改编自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过滤器并将参数传递给它(小提琴):

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);
    };
});

Answer 2

我喜欢这些答案背后的概念,但不认为它们提供了最灵活的解决方案.

我真正想做的事情并且我确信一些读者会有同样的感受,就是能够动态传递过滤器表达式,然后评估并返回适当的结果.

因此,单个自定义筛选器将能够处理以下所有内容:

{{ammount | picker:'currency:"$":0'}}

{{date | picker:'date:"yyyy-MM-dd HH:mm:ss Z"'}}

{{name | picker:'salutation:"Hello"'}} //应用另一个自定义过滤器

我提出了以下代码,它将$interpolate服务用于我的自定义过滤器.看到jsfiddle:

使用Javascript

myApp.filter('picker', function($interpolate ){
    return function(item,name){
       var result = $interpolate('{{value | ' + arguments[1] + '}}');
       return result({value:arguments[0]});
    };
});

Answer 3

使其工作的一种方法是使用函数进行绑定并在该函数内进行过滤.这可能不是最好的方法:现场演示(点击).

<div ng-repeat="row in list">
  {{ foo(row.value, row.filter) }}
</div>

JavaScript的:

$scope.list = [
  {"value": "uppercase text", "filter": "uppercase"}
];
$scope.foo = function(value, filter) {
  return $filter(filter)(value);
};