Angular custom filter by array value

Question

I'm trying to create a custom filter in the Angular.js app. But I'm really newbie in js and need for some help. Here is my jsfiddle example http://jsfiddle.net/gSXa7/16/

All I need is to get ability to filter objects by every value from "genre" array. The problem is that now it can be sorted only if the "genre" value is single, but I need to get ability to use every value to sort the data.

<div ng-app="people">
    <div ng-controller="PeopleController">
        <input ng-model="query" type="text" id="searchbox" placeholder="Search..."><br/>
        <input type="checkbox" ng-click="includeYear('2003')"/> 2003
        <input type="checkbox" ng-click="includeYear('2004')"/> 2004
        <input type="checkbox" ng-click="includeYear('2005')"/> 2005
        <hr/>
        <input type="checkbox" ng-click="includeGenre('Cinema')"/> Cinema
        <input type="checkbox" ng-click="includeGenre('Music')"/> Music
        <input type="checkbox" ng-click="includeGenre('Sport')"/> Sport
        <hr/>
        <ul>
            <li ng-repeat="f in gems | filter:yearFilter | filter:genreFilter | filter:query">
                {{f.name}}.......<i>Interest: {{f.genre}}</i>
            </li>
        </ul>
    </div>
</div>

Javascript:

'use strict'

angular.module('people', []);
 app.controller('PeopleController', function(){

    this.products = gems;
  });

function PeopleController($scope) {
    $scope.gems = [
    { name: 'Jason',
    year: '2003',
    genre: "Sport, Music, Cinema",
    }, 
    { name: 'Fred',
    year: '2003',
    genre: "Sport, Music, Cinema",
    },
    { name: 'Mike',
    year: '2004',
    genre: "Music, Cinema",
    },
    { name: 'Andrew',
    year: '2005',
    genre: "Cinema",
    },
    { name: 'Julie',
    year: '2005',
    genre: "Music",
    }
    ];

    $scope.yearIncludes = [];
    $scope.includeYear = function(year) {
        var i = $.inArray(year, $scope.yearIncludes);
        if (i > -1) {
            $scope.yearIncludes.splice(i, 1);
        } else {
            $scope.yearIncludes.push(year);
        }
    }

    $scope.yearFilter = function(gemStore) {
        if ($scope.yearIncludes.length > 0) {
            if ($.inArray(gemStore.year, $scope.yearIncludes) < 0)
                return;
        }

        return gemStore;
    }

    $scope.genreIncludes = [];
    $scope.includeGenre = function(genre) {
        var i = $.inArray(genre, $scope.genreIncludes);
        if (i > -1) {
            $scope.genreIncludes.splice(i, 1);
        } else {
            $scope.genreIncludes.push(genre);
        }
    }

    $scope.genreFilter = function(gemStore) {
        if ($scope.genreIncludes.length > 0) {
            if ($.inArray(gemStore.genre, $scope.genreIncludes) < 0)
                return;
        }

        return gemStore;
    }

}

Answer 1

Try this filter to have filtering by any of selected values

$scope.genreFilter = function(gemStore) {
    if ($scope.genreIncludes.length > 0) {
        var tmp = gemStore.genre.split(',').map(function(v) { return $.trim(v); });
        for(var x = 0; x < tmp.length; x++)
        {
            if ($.inArray(tmp[x], $scope.genreIncludes) >= 0)
                return gemStore;
        }
        return;
    }
    return gemStore;
}