2017-11-17 2 views
0

をフィルタリングする複数のcheckboxの検索バーがあります。フィルタを適用するチェックボックスをオンにしたときに、別のものを選択すると何も表示されません。ng-repeatの複数のチェックボックスフィルタ

例チェックボックスと保留中の承認が確認されたキャンセル

enter image description here

私に何か不足していますか?

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> 

答えて

0

フィルター上||(OR)演算子を使用します。

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

データが

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

Demo

+0

statusプロパティに応じて設定されたフィルタは、あなたの答えをしようとしましたが、それは問題を修正しませんでした。 – Priz

+0

@Prizは更新された回答を確認します。 –

+0

あなたの更新された回答が私にdaterangeフィルタのエラーを与えようとしました – Priz

関連する問題