AngularJS - 控制器中的多个过滤器用法

时间:2015-05-22 06:25:12

标签: angularjs angularjs-filter

我想在控制器中使用多个过滤器

目前正在使用

$filter('limitTo')($filter('lowercase')($filter('translate')('ACTIVE')), 5)

如果我们有更多这样的过滤器。如何在控制器中使用多个过滤器而不是像这样的传统格式?

2 个答案:

答案 0 :(得分:3)

您可以简单地引入变量:

var limitTo = $filter('limitTo');
var lowercase = $filter('lowercase');
var translate = $filter('translate');

var filteredValue = limitTo(lowercase(translate('ACTIVE')), 5);

甚至

var lowercaseStatus = lowercase(translate('ACTIVE'));
var filteredValue = limitTo(lowercaseStatus, 5);

另一种策略是使用与视图中相同的语法:

var filteredValue = $scope.$eval('"ACTIVE" | translate | lowercase | limitTo:5');

答案 1 :(得分:1)

这是一个有趣的问题。通常你会做类似的事情或类似的东西:

var translatedValue = $filter('translate')('ACTIVE');
var lowercaseValue = $filter('lowercase')(translatedValue);
$scope.finalValue = $filter('limitTo')(lowercaseValue, 5)

我创建了一个受this answer启发的服务。

app.service('FilterChain', 
['$filter', function($filter) {
    var chain = {
        value : '',
        start : function(value) {
            this.value = value;
            return this;
        },
        applyFilter : function(filterName, args) {
            args = args || [];
            args.unshift(this.value);
            this.value = $filter(filterName).apply(undefined, args)
            return this;
        }
    };

    return chain;
}]);

用法就像这样

$scope.value = FilterChain.start('Active')
                .applyFilter('translate')
                .applyFilter('limitTo', [5])
                .applyFilter('uppercase')
                .value;

您可以将该服务与其他过滤器和对象(如阵列)一起使用。请在此处查看工作示例:JSFiddle