angularjs - 在 Controller 中链接 Angular 过滤器，同时使其可变

Question

假设我创建了一个 Angular 应用并编写了一些新的过滤器:仅显示奇数，并且仅显示幸运数字。

有一个 oddList 过滤器和一个 luckyList 过滤器:

var app = angular.module('app', []);
app.filter('oddList', function() {
    return function(items) {
        var filtered = [];
        angular.forEach(items, function(item) {
            if (item % 2 !== 0)
                filtered.push(item);
        });
        return filtered;
    };
});
app.filter('luckyList', function() {
    return function(items) {
        var filtered = [];
        angular.forEach(items, function(item) {
            if (item === 2 || item === 7 || item === 11)
                filtered.push(item);
        });
        return filtered;
    };
});

在 View 部分，我可以链接这些过滤器:

<ul><li ng-repeat="number in numbers | oddList | luckyList">{$number}</li></ul>

当这个工作正常时，我应该看到剩余的 7 和 11。

我想让我的过滤器变量用于此ng-repeat。我可以做一些与此过程类似的事情吗？

假设我将变量过滤器命名为 filter:listFilter，以便在我们的 Controller 中，我们可以动态更新 $scope.listFilter。

<ul><li ng-repeat="number in numbers | filter:listFilter">{$number}</li></ul>

以及具有伪代码的 Controller :

app.controller('main', function($scope, $filter) {
    $scope.numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
    $scope.listFilter = $filter('oddList | luckyList');
});

知道如何在 Controller 中链接(变量)过滤器吗？希望能够在奇数、幸运和/或两者之间切换。

Answer 1

一种方法是使用函数返回过滤后的数据:

function MainCtrl($scope, $filter) {
    $scope.numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

    $scope.filteredNumbers = function() {
        var result = $scope.numbers;

        if ($scope.oddListEnabled) {
            result = $filter('oddList')(result);  
        }        
        if ($scope.luckyListEnabled) {    
            result = $filter('luckyList')(result);
        }

        return result;
    };
}

模板:

<ul>
  <li ng-repeat="number in filteredNumbers()">
    {{number}}
  </li>
</ul>

这是一个 plunkr:http://plnkr.co/edit/4ectDA?p=preview