Filter data by multiple criteria using checkboxes in AngularJS

Question

I'm fairly new to AngularJS and I've been looking to setup a filter function that basically filters a list of upcoming events for the company that I work for. I was wondering if there is a way to filter the data based on multiple checkboxes.

I basically need to set it up to have 3 checkboxes:

Headline Event
Comedy Event
Free Event

If Comedy Event is selected display comedy events. If Headline event is selected display Headline event. If Free event is selected display free events. Or if Headline and Comedy are selected show both.

I just have not been able to get anything working properly.

In the JSON file the event types are organized like so:

    "entertainment_type_is_headline": "0",
    "entertainment_type_is_free": "1",
    "entertainment_type_is_comedy": "0",

Here is the link to the data file: https://www.codepile.net/pile/RlrmdDZX

I'm assuming it goes like so... if the event has entertainment_type_is_headline = "1" display all events where entertainment_type_is_headline is = "1" ... but I just can't wrap my head around it...

I've seen very small simple examples and large overly-complex examples but nothing seems to work for me.

NTP · Accepted Answer · 2018-05-14 06:27:59Z

1

I can think of 2 solutions

1) Pass an object to you filter expression

<input type="checkbox" ng-model="filter. entertainment_type_is_headline"
       ng-true-value="1" ng-false-value="0">
<input type="checkbox" ng-model="filter.entertainment_type_is_free"
       ng-true-value="1" ng-false-value="0">
<input type="checkbox" ng-model="filter.entertainment_type_is_comedy"
       ng-true-value="1" ng-false-value="0">
<div ng-repeat="event in events | filter:{entertainment_type_is_headline: filter.entertainment_type_is_headline, entertainment_type_is_free: filter.entertainment_type_is_free,entertainment_type_is_comedy: filter.entertainment_type_is_comedy }"></div>

2) Create a custom filter

js

$scope.filterEvent = function(row){
    if(row.entertainment_type_is_headline.indexOf($scope.filter.entertainment_type_is_headline) >= 0 && ...)
        return true;
    else 
        return false;

}

html

<div ng-repeat="event in events | filter: filterEvent"></div>

Demo

edited May 14, 2018 at 6:27

answered May 13, 2018 at 6:56

NTP

4,4483 gold badges18 silver badges25 bronze badges

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

2 Comments

MXM97 Over a year ago

Is there anyway you could create a working example so I would know how to integrate this into my code?

MXM97 Over a year ago

Amazing example. Thank you so much!

Collectives™ on Stack Overflow

Filter data by multiple criteria using checkboxes in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related