angularjs – 链接控制器中的角度过滤器,同时使它们可变

发布时间：2020-12-17 07:19:57 所属栏目：安全来源：网络整理

导读：假设我创建一个Angular应用程序并编写一些新的过滤器：仅显示赔率,并仅显示幸运数字. 有一个oddList过滤器和一个luckyList过滤器： var app = angular.module('app',[]);app.filter('oddList',function() { return function(items) { var filtered = []; ang

假设我创建一个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(item) {
            if (item === 2 || item === 7 || item === 11)
                filtered.push(item);
        });
        return filtered;
    };
});

在视图部分,我可以链接这些过滤器：

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

当这工作时,我应该看到7和11剩余.

我想让这个ng-repeat的过滤器变量.我能做些什么与这个过程类似吗？

假设我将变量过滤器命名为：listFilter,以便在我们的控制器中,我们可以动态更新$scope.listFilter.

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

和伪代码的控制器：

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

知道如何在控制器中链接(变量)过滤器吗？希望能够在奇怪,幸运和/或两者之间切换.

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

function MainCtrl($scope,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>

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!