通过复选框的角度嵌套筛选器

我正在尝试构建一个小计划应用程序，该应用程序显示发生在两天之中的事件。用户目前能够通过复选框过滤事件的类别/主题。这里是一个演示：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

来源

2016-04-21 AllUnknown

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

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

查看EXAMPLE这里。

来源

2016-04-21 22:39:56

通过复选框的角度嵌套筛选器

回答

相关问题