Фильтровать по: checkbox in Angular

Question

Необходимо фильтровать элементы, щелкнув по галочке в массиве. Вот то, что я пытаюсь сделать

<thead> 

    <th><input ng-model="archived.state" type="checkbox">Show archived</th> 

    </th> 
<tbody> 
     <tr ng-repeat="paymentinfo in paymentList | filter:keyword | filter:money | filter:getdate | filter:archived"> 
      <td>{{paymentinfo.date}}</td> 
      <td ng-click="singlepage(paymentinfo.id)" ><a>{{paymentinfo.name}}</a> </td> 
        <td> 
         <div class="grey-flag remark-payment"> 
          <div class="hover-remark">{{paymentinfo.remark}}</div> 
         </div> 
        </td> 
      <td>$ {{paymentinfo.amount}}</td> 
      <td id="outmouse"> 
       <ul style="list-style: none;" class="gt-reset"> 
       <li class="dropdown changecoursename"> 
        <a class="dropdown-toggle" data-toggle="dropdown"> 
         <span class="tableOperation norlmalstate">Open Course</span> 
        <span class="tableOperation openedstate">more options</span> 
        <b class="caret"></b> 
       </a> 
       <ul class="dropdown-menu"> 
        <li><a class="tableOperation" ng-click="paymentRemarks()">Remarks</a></li> 
        <li><a class="tableOperation" ng-click="paymentReturn(paymentinfo)">Return</a></li> 
        <li><a class="tableOperation" ng-click="paymentDelete(paymentinfo)">Delete</a></li> 

       </ul> 
       </li> 
      </ul> 
      </td> 
     </tr> 

Моего JS

$scope.datas = [ 
     {date:'06-12-2016', name : 'Pinao Class', state: 'archived', remark : 'remarled', amount : 101, id : 21}, 
     {date:'15-04-2016', name : 'drivers Class', state: 'notarchived', remark : 'remarled', amount : 102, id : 22}, 
     {date:'24-03-2016', name : 'Airplane Class', state: 'archived', remark : 'remarled', amount : 103, id : 23}, 
     {date:'28-02-2016', name : 'burger Class', state: 'notarchived', remark : 'remarled', amount : 104, id : 24}, 
     {date:'28-02-2016', name : 'burger Class1', state: 'notarchived', remark : 'remarled', amount : 104, id : 241}, 
      {date:'28-02-2016', name : 'burger Class2', state: 'notarchived', remark : 'remarled', amount : 104, id : 2432}, 
      {date:'28-02-2016', name : 'burger Class3', state: 'notarchived', remark : 'remarled', amount : 104, id : 2342}, 
      {date:'28-02-2016', name : 'burger Class4', state: 'archived', remark : 'remarled', amount : 104, id : 2443}, 
      {date:'28-02-2016', name : 'burger Class5', state: 'archived', remark : 'remarled', amount : 104, id : 2243}, 
       {date:'28-02-2016', name : 'burger Class6', state: 'archived', remark : 'remarled', amount : 104, id : 2242}, 
    ]; 

    $scope.paymentList = $scope.datas; 

Как создать фильтр, который я нажал и все элементы с состоянием поля: «notarchived», покажет? и после того, как остановить все элементы снова отображается

Answer 1

Может попробовать это один

<thead> 

<th><input ng-model="archived.state" type="checkbox" 
     ng-true-value="'notarchived'" ng-false-value="undefined">Show archived</th> 

</th> 
<tbody> 
    <tr ng-repeat="paymentinfo in paymentList | filter:keyword | filter:money | filter:getdate | filter:{state: archived.state}"> 
     <td>{{paymentinfo.date}}</td> 
     <td ng-click="singlepage(paymentinfo.id)" ><a>{{paymentinfo.name}}</a> </td> 
       <td> 
        <div class="grey-flag remark-payment"> 
         <div class="hover-remark">{{paymentinfo.remark}}</div> 
        </div> 
       </td> 
     <td>$ {{paymentinfo.amount}}</td> 
     <td id="outmouse"> 
      <ul style="list-style: none;" class="gt-reset"> 
      <li class="dropdown changecoursename"> 
       <a class="dropdown-toggle" data-toggle="dropdown"> 
        <span class="tableOperation norlmalstate">Open Course</span> 
       <span class="tableOperation openedstate">more options</span> 
       <b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a class="tableOperation" ng-click="paymentRemarks()">Remarks</a></li> 
       <li><a class="tableOperation" ng-click="paymentReturn(paymentinfo)">Return</a></li> 
       <li><a class="tableOperation" ng-click="paymentDelete(paymentinfo)">Delete</a></li> 

      </ul> 
      </li> 
     </ul> 
     </td> 
    </tr>