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

时间:2017-11-17 08:25:35

标签: javascript angularjs checkbox angularjs-filter

所以我有一个包含多个checkbox的搜索栏会在我检查任何复选框时过滤ng-repeat,但是当我选择另一个复选框时,它不会返回什么?

示例

enter image description here

已取消已选中复选框和待批准!

我错过了什么吗?

displayedCollection值

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

纳克重复

<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>

1 个答案:

答案 0 :(得分:0)

在过滤器上使用||(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