Angular checkbox to filter data

Question

I am showing FreeEvents using checkbox. I am passing the value to the filter as filter:filterFreeEvent . This is working fine.

But I want to avoid passing value in the filter rather I want to use a change event of a checkbox to filter.

Something like

  <input type="checkbox" ng-model="showFreeEvent" ng-change($event)">

This is my JsFiddle example.

Has anyone done something like this?. Any help or suggestion would be appreciated.

Thanks in advance

Answer 1

You can also change a variable in the change-event only like this :

<input ng-model="changeValue" ng-change="showFreeEvent = showFreeEvent== false ? true : false" value="" type="checkbox" />

If the showFreeEvent is false, ng-change will change it to true and vice-versa.

Answer 2

You can use ng-change to handle the checkbox change event. Then you can use Array.prototype.filter to filter your events. Filtered events should be stored in a separate variable. Here is an example of how to do this:

<input ng-model="showFreeEvents" type="checkbox" ng-change="onShowFreeEventsChanged()" />

<div ng-controller="myCtrl">
  <div ng-repeat="event in filteredEvents">
    <span>{{event.eventName}}</span></br>
    <span>{{event.eventStartDateTime}}</span></br>
    <span>{{event.itemCreatedDateTime}}</span></br>
    </br></br>
  </div>
</div>

Then in your controller:

$scope.showFreeEvents = false;
$scope.events = [ /* here you should store unfiltered events */ ];
$scope.filteredEvents = filterEvents($scope.events);

// whenever showFreeEvents checkbox value changes, re-filter the events
$scope.onShowFreeEventsChanged = function() {
  $scope.filteredEvents = filterEvents($scope.events);
};

function filterEvents(events) {
  return events.filter(function(event) {
    // Here you should write your filtering logic.
    // I'd recommend to remove such comparisons, as these are prone to errors.
    //                                      \
    return !$scope.showFreeEvents || event.eventName === 'Event 9';
  });
}