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

Question

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

我非常接近让它工作，我无法弄清楚如何构建自定义过滤器并动态传递过滤器模式

组成列的对象看起来像

{ 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'，以创建日期/时间过滤器。或 21 和 currency 以获取美元价值。

我希望能够以与视图类似的方式使用 Angular 的内置功能

Answer 1

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

所以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));

编辑：这是一个带有两个按钮的 JSFiddle，第一个演示了您使用“日期：'MM/dd/yy hh:mm a'”的原始方法，第二个演示了我应用的方法上面的大纲http://jsfiddle.net/4whemakt/

Answer 2

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

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/