Filter items by checkbox in Angular

Question

Need to filter items by clicking on checkbox in array. Here what I try to do

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

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

How to create filter that I clicked and all items with field state: 'notarchived', will show? and after unchecked all items is shown again

Matuszew · Accepted Answer · 2016-12-21 14:17:50Z

1

Maybe try this one

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

edited Dec 21, 2016 at 14:17

answered Dec 21, 2016 at 14:11

Matuszew

8515 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matuszew Over a year ago

ng-false-value="undefined" :)

Collectives™ on Stack Overflow

Filter items by checkbox in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related