按复选框的角度嵌套过滤器答案

【问题标题】：Angular nested filters by checkbox按复选框的角度嵌套过滤器
【发布时间】：2016-04-21 21:57:25
【问题描述】：

我正在尝试构建一个小型日程安排应用程序，该应用程序显示两天内发生的事件。用户目前可以通过复选框过滤事件的类别/主题。这是一个演示：http://jsfiddle.net/qx3cD/201/

我想创建一个嵌套过滤器，首先允许用户选择第 1 天或第 2 天，然后按类别过滤这些结果。

有没有办法使用 Angular 执行嵌套过滤器？

function MyCtrl($scope) {

$scope.showAll = true;
$scope.checkChange = function() {
    for(t in $scope.categoryArray){
        if($scope.categoryArray[t].on){
            $scope.showAll = false;
            return;
        }
    }
    $scope.showAll = true;
};

   $scope.myFunc = function(a) {
   if($scope.showAll) { return true; }

   var sel = false;

    for(cat in $scope.categoryArray){
        var t = $scope.categoryArray[cat];
        console.log(t);
        if(t.on){
            if(a.category.indexOf(t.name) == -1){
                return false;
            }else{
                sel = true;
            }
        }           
    }
   return sel;
};

$scope.categoryArray = [{ name: "A", on: false}, {name:"B", on: false}, {name:"C", on: false}, {name:"D", on: false}, {name:"E", on: false},             {name:"F", on: false}, {name:"G", on: false}, {name:"H", on: false}];

$scope.sessionArray = [{
    "time": "9:00",
    "day": "day 1",
    "name": "Session One",
    "category": ["A", "B", "E", "D"]
}, {
    "time": "10:00",
    "day": "day 1",
    "name": "Session Two",
    "category": ["A", "B", "C", "D"]
}, {
    "time": "11:00",
    "day": "day 1",
    "name": "Session Three",
    "category": ["G", "F", "D", "E"]
}, {
    "time": "12:00",
    "day": "day 1",
    "name": "Intermission A",
    "category": ["A", "B", "C", "D"]
}, {
    "time": "13:00",
    "day": "day 1",
    "name": "Session Four",
    "category": ["H", "A", "E"]
}, {
    "time": "9:00",
    "day": "day 2",
    "name": "Session Five",
    "category": ["D", "E", "B", "G"]
}, {
    "time": "11:00",
    "day": "day 2",
    "name": "Session Six",
    "category": ["A", "E", "C"]
}, {
    "time": "12:00",
    "day": "day 2",
    "name": "Session Seven",
    "category": ["G", "H", "B", "C"]
}]

HTML

<li ng-repeat="cat in categoryArray">
    <label>
    <input type="checkbox" ng-model="cat.on" ng-change="checkChange()" />{{cat.name}}</label>
</li>
<hr>
<h1><strong>Category:</strong></h1>

<div ng-repeat="sessionItem in sessionArray | filter:myFunc | orderBy: 'id'" class="ng-scope">
    <h3>{{sessionItem.name}}</h3>
</div>

DEMO

【问题讨论】：

标签： javascript angularjs angularjs-directive angular-ngmodel angular-filters

【解决方案1】：

要嵌套另一个过滤器，只需添加另一个管道| 并正常使用“filter”过滤器。

<div ng-repeat="sessionItem in sessionArray | filter:myFunc | filter:theFilter | orderBy: 'id'">

在此处查看EXAMPLE。

【讨论】：