Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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;
    }

}
share|improve this question

1 Answer 1

up vote 1 down vote accepted

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;
}
share|improve this answer
    
Thank you! It works! –  John Johansen Oct 21 at 9:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.