angularjs – 在ng重复中动态应用格式化过滤器

发布时间：2020-12-17 08:27:44 所属栏目：安全来源：网络整理

导读：我的目标是应用一个被设置为循环对象的属性的格式化过滤器。采取这个对象数组： [ { "value": "test value with null formatter","formatter": null,},{ "value": "uppercase text","formatter": "uppercase",{ "value": "2014-01-01","formatter": "date",

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

采取这个对象数组：

[
  {
    "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

但也许obviusly这个代码引发一个错误：

Unknown provider: row.formatterFilterProvider <- row.formatterFilter

我不能忘记如何解析{{}}中的“formatter”参数;谁能帮助我？

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

|是一个角度构造，找到一个具有该名称的定义的过滤器，并将其应用于左侧的值。我想你需要做的是创建一个过滤器，以一个过滤器名称作为参数，然后调用适当的过滤器 (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过滤器通过字符串选择添加过滤器，并将参数传递给它(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);
    };
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!