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?
The problem you are facing is the following:
search.cancelled
is undefined
. true
. 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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.