Filtering on object property with checkbox with AngularJS

Question

I have an ng-repeat list displaying multiple properties of an array of objects and the possibility to filter it using input fields.

What I didn't manage to do is to implement the possibility to filter the results using a checkbox and the existance or not of a specific object.property.

Basically I want it to display the results where record.cancelled = true when the checkbox is checked, and all the results if it remains unchecked.

Heres my HTML:

   <div class="row msf-row" 
     ng-repeat="record in recordlist | filter: search" 
     ng-class="{ 'msf-cancelled': record.cancelled}">
      <div class="col-md-1">{{record.time}}</div>
      <div class="col-md-1"><strong>{{record.car}}</strong></div>
      <div class="col-md-2">{{record.driver}}</div>
      <div class="col-md-2">{{record.from}}</div>
      <div class="col-md-3" ng-show="editItem == false" ng-hide="editItem">{{record.destination}}</div>
      <div class="col-md-3" ng-show="editItem == true" ng-hide="!editItem">
        <select class="form-control" ng-model="record.destination" ng-options="location.place as location.place for location in locationlist | orderBy:'place'">
          <option value="">Destination</option>
        </select> 
      </div>
      <div class="col-md-1 msf-centered" ng-show="editItem == false" ng-hide="editItem">{{record.pax}}</div>
      <div class="col-md-1" ng-show="editItem == true" ng-hide="!editItem">
        <select class="form-control" ng-model="record.pax">
            <option>Driver</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
          </select>
      </div>

And the current filter:

    <div class="col-md-12 msf-filter">
        <div class="row">
          <form role="form">
            <div class="col-md-1 msf-date">
              <input class="form-control" placeholder="Time" ng-model="search.time">
            </div>
            <div class="form-group col-md-1">
              <input class="form-control" placeholder="Car" ng-model="search.car">
            </div>
            <div class="form-group col-md-2">
              <input class="form-control" placeholder="Driver" ng-model="search.driver">
            </div>
            <div class="form-group col-md-2">
              <input class="form-control" placeholder="From" ng-model="search.from">
            </div>
            <div class="form-group col-md-3">
              <input class="form-control" placeholder="Destination" ng-model="search.destination">
            </div>
            <div class="form-group col-md-1">
              <input class="form-control" placeholder="Pax" ng-model="search.pax">
            </div>
            <div class="form-group col-md-1">
              <input type="checkbox" ng-model="search.cancelled"> Cancelled 
            </div>

          </form>
        </div>
      </div>

So far, when I check the checkbox, it will filter the results correctly, but when I uncheck, it will display no results at all (when it should be displaying all of them).

What am I missing?

Could you provide JSfiddle with your code?

Artyom Pranovich
– Artyom Pranovich

2014-10-22 11:01:41 +00:00
Commented Oct 22, 2014 at 11:01 — Artyom Pranovich
– Artyom Pranovich, Commented Oct 22, 2014 at 11:01

friedi · Accepted Answer · 2014-10-22 12:03:36Z

1

The problem you are facing is the following:

At first search.cancelled is undefined.
When you click the checkbox the first time, the value changes to true.
If you click again the value will change to false, so the filter searchs for elements where record.cancelled == false.

One way to get around this problem is to use the ng-change attribute for the checkbox element like this:

ng-change="search.cancelled = search.cancelled ? true : undefined"

In the HTML:

<input type="checkbox" ng-model="search.cancelled" ng-change="search.cancelled = search.cancelled ? true : undefined">

Check out this DEMO

answered Oct 22, 2014 at 12:03

friedi

4,3601 gold badge15 silver badges19 bronze badges

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

1 Comment

Eric Mitjans Over a year ago

This works perfectly for a boolean property like search.cancelled, which is true or undefined, but I can't manage to do the same for another property which has a string. I have also a checkbox for search.comment which is supposed to filter if the .comment property exists or not...

Collectives™ on Stack Overflow

Filtering on object property with checkbox with AngularJS

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