AngularJS, filter on checkbox

Question

I have a ul with ng-repeat, and I am trying to make some values hide when a checkbox is unticked. Essentially I have 2 different statuses in a JSON file: new and completed.

I want completed ones to show when a checkbox is ticked and for them to hide when a checkbox is unticked.

My code is below:

<div>
  <input ng-model="$ctrl.query" placeholder="Search">
  <input type="checkbox" ng-model="self.information">
  <span> Show Completed </span>
</div>
<div class="container:fluid" id="list">
    <ul>
        <li ng-repeat="info in self.information | 
         filter: {'status': 'complete'}" ng-show="self.information">
          <div class="row">
            <!-- LI CONTENTS -->
         </li>
     </ul>
</div>

Making a jsfiddle always makes it easier for others to contribute. — Mahbub
– Mahbub, Commented Nov 4, 2016 at 12:25

Manish Singh · Accepted Answer · 2016-11-04 11:32:19Z

1

<div>
  <input ng-model="$ctrl.query" placeholder="Search">
  <input type="checkbox" ng-model="self.information" ng-true-value="completed" ng-false-value="new">
  <span> Show Completed </span>
</div>
<div class="container:fluid" id="list">
    <ul>
        <li ng-repeat="info in self.information | 
         filter: {'status': self.information}">
          <div class="row">
            <!-- LI CONTENTS -->
         </li>
     </ul>
</div>

I hope it helps :)

answered Nov 4, 2016 at 11:32

Manish Singh

5383 silver badges13 bronze badges

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

1 Comment

Kieran Craven Over a year ago

Tahnks a lot, but sorry it didn't work, I'm going to add a fiddle now to help!

Collectives™ on Stack Overflow

AngularJS, filter on checkbox

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