在 ng-repeat 中动态添加过滤器

Question

我正在构建一个 table，其中行和列完全基于发送给它的数据构建。

我非常接近它的工作，我在弄清楚如何构建自定义过滤器和动态传递过滤器模式时遇到了问题

组成列的对象看起来像

{ name: 'transactionDate', displayName: 'Date / Time', displayOrder: 1, filter: "date: 'MM/dd/yy hh:mm a'" }

构成行的事务的对象如下所示：

{ transactionDate: '2015-06-11', transactionType: 'This Type', transactionAmount: 25 }

我的HTML是这样的：

<td ng-repeat="col in columns">{{transaction[col.name] | dynamicFilter: col.filter}}</td>

我目前构建的过滤器是：

function dynamicFilter($filter) {
    return function (value, filter) {
        console.log(filter);
        console.log(value);
        var test = $filter(filter)(value);
        return test;
    }
}

过滤器和值都正确通过。我无法弄清楚如何在返回之前将过滤器应用于该值。可能传入的值将 2015-06-10T16:17:14 是，将传入的过滤器可以是 date: 'MM/dd/yy hh:mm a' 以创建 date/time 过滤器。或者 21 和 currency 表示美元价值。

我希望能够以与在视图[=40 上类似的方式使用 Angular 的内置功能=]

Answer 1

您可以在动态过滤器中有条件地应用和 return 过滤值。像这样

function dynamicFilter($filter) {
    return function (value, filter) {
        if (filter.indexOf('date:') !== -1) {
           //Note: I am using moment js to format the date
           return moment(value).format(filter.match(/'([^']+)'/)[1]);
        }
        else {
            return $filter(filter)(value)
        }
    }
}

moment.js参考http://momentjs.com/

Answer 2

对于这些具有部分参数（例如您提供的日期格式）的动态过滤器，您必须从过滤器中删除参数并稍后应用。

所以 filter: "date: 'MM/dd/yy hh:mm a'", 需要只是 filter: "date".

附加约束 MM/dd/yy hh:mm a 将与值 $filter(filter)(value, 'MM/dd/yy hh:mm a');

一起发送

要做到这一点，您可以利用 apply。对象可以是：

{filter: { type: "date", params: ['MM/dd/yy hh:mm a'] } }

指令可以有（假设你也发送参数）：

var filterFn = $filter(filter.type); 
return filterFn.apply(filterFn, [value].concat(filter.params));

EDIT：这是一个带有两个按钮的 JSFiddle，第一个演示您使用 "date: 'MM/dd/yy hh:mm a'" 的原始方法，第二个演示我在上面概述的应用方法 http://jsfiddle.net/4whemakt/

在 ng-repeat 中动态添加过滤器

Dynamically add filter in ng-repeat

angularjs

angularjs-ng-repeat

angularjs-filter