按数组值进行角度自定义筛选

Angular custom filter by array value

本文关键字：自定义筛选数组更新时间：2023-09-26

我正试图在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;
    }
}

尝试此筛选器以通过任何选定值进行筛选

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