在 ng-repeat 中动态应用格式化过滤器 [英] apply formatting filter dynamically in a ng-repeat

问题描述

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

采用这个对象数组:

<预><代码>[{"value": "使用空格式化程序测试值",格式化程序":空，},{"value": "大写文本","格式化程序": "大写",},{"value": "2014-01-01",格式化程序":日期"，}]

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

{{ 行.值 |row.formatter }}

我期待看到这个结果:

 使用空格式化程序测试值大写文本2014 年 1 月 1 日

但很明显这段代码会抛出一个错误:

未知提供者:row.formatterFilterProvider <- row.formatterFilter

我无法想象如何解析 {{ }} 中的格式化程序"参数；有人可以帮我吗?

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

解决方案

| 是一个角度结构，用于查找具有该名称的已定义过滤器并将其应用于左侧的值.我认为您需要做的是创建一个过滤器，将过滤器 name 作为参数，然后调用适当的过滤器 (小提琴)(改编自 M59 的代码):

HTML:

{{ 行.值 |选择器:row.formatter }}

Javascript:

app.filter('picker', function($filter) {返回函数(值，过滤器名称){返回 $filter(filterName)(value);};});

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

HTML:

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

Javascript:

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

My goal is to apply a formatting filter that is set as a property of the looped object.

Taking this array of objects:

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

The template code i'm trying to write is this:

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

And i'm expecting to see this result:

test value with null formatter
UPPERCASE TEXT
Jan 1, 2014

But maybe obviusly this code throws an error:

Unknown provider: row.formatterFilterProvider <- row.formatterFilter

I can't immagine how to parse the "formatter" parameter inside the {{ }}; can anyone help me?

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

解决方案

The | is an angular construct that finds a defined filter with that name and applies it to the value on the left. What I think you need to do is create a filter that takes a filter name as an argument, then calls the appropriate filter (fiddle) (adapted from M59's code):

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

Thanks to @karlgold's comment, here's a version that supports arguments. The first example uses the add filter directly to add numbers to an existing number and the second uses the useFilter filter to select the add filter by string and pass arguments to it (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);
    };
});

这篇关于在 ng-repeat 中动态应用格式化过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！