javascript - 按数组值的 Angular 自定义过滤器

Question

我正在尝试在 Angular.js 应用程序中创建自定义过滤器。但我真的是 js 的新手，需要一些帮助。这是我的 jsfiddle 示例 http://jsfiddle.net/gSXa7/16/

我所需要的只是能够按“流派”数组中的每个值过滤对象。问题是现在只有当“流派”值是单一的时候它才能被排序，但我需要能够使用每个值来对数据进行排序。

<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

尝试使用此过滤器按任何选定值进行过滤

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