To handle the checkbox change event, you can utilize ng-change. Following that, employ Array.prototype.filter to refine your events, with the filtered events being saved in a separate variable. Below is an example showcasing how this can be achieved:
<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>
In your controller, include:
$scope.showFreeEvents = false;
$scope.events = [ /* store unfiltered events here */ ];
$scope.filteredEvents = filterEvents($scope.events);
// Re-filter the events whenever the value of showFreeEvents checkbox changes
$scope.onShowFreeEventsChanged = function() {
$scope.filteredEvents = filterEvents($scope.events);
};
function filterEvents(events) {
return events.filter(function(event) {
// Write your filtering logic here.
// Eliminating such comparisons is advisable as they are error-prone.
// \
return !$scope.showFreeEvents || event.eventName === 'Event 9';
});
}