使用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.

Answer 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