ng-repeat 中的多个复选框过滤器

Question

所以我有一个包含多个checkbox 的搜索栏，当我选中任何一个复选框时，它们将过滤ng-repeat，但是当我选择另一个复选框时它不会返回任何内容？

示例

已取消的复选框和待批准已被选中！

我错过了什么吗？

displayedCollection 值

displayedCollection:[{ "employeeName" : "test user","status" : "Pending Approval"}]

ng-重复

<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" ng-model="cancelled" ng-true-value="'Cancelled'" ng-false-value="">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Cancelled</span>

<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" ng-model="pa" ng-true-value="'Pending Approval'" ng-false-value="">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Pending Approval</span>

html

<tr ng-repeat="leave in displayedCollection | dateRanges:from:to | filter:cancelled | filter:pa">
<td class="text-capitalize">{{ leave.fullName }}</td>
<td>{{ leave.fromDate | date: 'MM/dd/yyyy'}} - {{ leave.toDate | date: 'MM/dd/yyyy' }}</td>
<td>{{ leave.leaveType }}</td>
<td>{{ }}</td>
<td class="text-center">{{ leave.leaveDays }}</td>
<td class="text-center">{{ leave.leaveStatus }}</td>
<td class="text-center">
    <i class="fa fa-comment-o" aria-hidden="true" data-target="#modalComment" data-toggle="modal" ng-click="vm.getComment(leave)"></i>
</td>
<td class="text-center">
    <button type="button" class="btn btn-trans-blue btn-raised btn-xs btn-circle">
        <strong>
            <i class="fa fa-ellipsis-h fa-1x" aria-hidden="true"></i>
        </strong>
    </button>
    <button type="button" class="btn btn-trans-red btn-raised btn-xs btn-circle" ng-click="vm.deleteLeave(leave)">
        <i class="fa fa-trash-o fa-1x" aria-hidden="true"></i>
    </button>
</td></tr>

Answer 1

在过滤器上使用|| (OR) 运算符。

<tr ng-repeat="leave in displayedCollection | dateRanges:from:to | filter: (cancelled || pa)">

也根据status属性过滤数据集

<li ng-repeat="account in accounts | filter:{status : pa ||cancelled  }">{{account}}</li>

Demo