Angular verschachtelte Filter nach Kontrollkästchen

Question

Ich versuche, eine kleine Zeitplan-App zu erstellen, die Ereignisse an einem von zwei Tagen zeigt. Benutzer sind derzeit in der Lage, die Kategorie/Thema der Ereignisse durch Kontrollkästchen zu filtern. Hier ist eine Demo: http://jsfiddle.net/qx3cD/201/

Ich möchte einen geschachtelten Filter erstellen, der Benutzern ermöglicht, entweder Tag 1 oder Tag 2 auszuwählen und dann durch diese Ergebnisse nach Kategorie gefiltert.

Gibt es eine Möglichkeit, einen geschachtelten Filter mit Angular durchzuführen?

JS

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

Answer 1

So verschachteln andere Filter nur | ein weiteres Rohr hinzufügen und die "filter" Filter normalerweise verwenden.

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

Überprüfen Sie die EXAMPLE hier.