Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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?

share|improve this question
1  
Could you provide JSfiddle with your code? –  Artyom Pranovich Oct 22 '14 at 11:01

1 Answer 1

up vote 1 down vote accepted

The problem you are facing is the following:

  1. At first search.cancelled is undefined.
  2. When you click the checkbox the first time, the value changes to true.
  3. 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

share|improve this answer
    
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... –  Eric Mitjans Oct 26 '14 at 10:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.