Angular JS Filter或语句

时间:2016-03-14 21:34:10

标签: javascript angularjs angular-filters

我有一个项目的ng-repeat语句。然后我有一个下拉列表,选择项目所在的区域。如果它是一个区域,我有它工作,但我需要检查多个地区的项目。他们选择了非洲和北美的例子。

<div class="column project-thumbnail" data-ng-repeat="project in   projects | orderBy:livePredicate:'title' | filter:liveRegion:'region'>

我需要它像这样:

filter:'Africa' OR 'North America' OR 'etc':'region'>

我试图将它传递给一个对象,我也尝试过在另一篇帖子中看到的关于这样传递的函数:

$scope.showMovie = function(movie){
return movie.genre === $scope.Filter.Comedy || 
    movie.genre === $scope.Filter.Drama ||
    movie.genre === $scope.Filter.Action;

任何建议或帮助都是非常感谢。该对象有一个与之比较的project.region,可以包含任意数量的值。所以我想要显示任何选定的区域。

2 个答案:

答案 0 :(得分:1)

我还没有尝试过,但我相信您应该能够将数组传递给自定义过滤器并在其中应用过滤器逻辑。如下所示:

angular.module('app', []).
filter('regionFilter', function () {
    return function (projects, regions) {
        var filteredProjects=[]
        angular.forEach(projects, function (project) {
            if (regions.indexOf(project.region)>=0) {
                filteredProjects.push(value);
            }
        });
        return filteredProjects;
    };
});

并且

<div class="column project-thumbnail" data-ng-repeat="project in   projects | regionFilter: regions">

区域是您想要作为过滤条件的所选区域的数组。

另外,您对orderBy的语法似乎不对。它应该像{{ orderBy_expression | orderBy : expression : reverse}}

答案 1 :(得分:0)

您的解决方案可能类似于构建自定义过滤器

因此,如果您有可能的标准列表,请用&#39;分隔,&#39; (AKA csv)...

 .filter('csvFilter', function() {
    return function(data, csv, field) {
        return data.filter(function(d) {
            if (!csv) return true;
            var csvArr = csv.split(',');
            for (var i = 0; i < csvArr.length; i++) {
                if (d[field] === csvArr[i])
                    return true;
            }
            return false;
        });
    }
})

此过滤器使用javascript avnilla filter()函数。

参见JSFiddle:https://jsfiddle.net/ronapelbaum/svxL486n/

更好的解决方案

对角度数组使用复杂过滤器可能会降低性能。在这种情况下,我建议使用ng-hide的简单条件:

<强> HTML

 <ul ng-repeat="project in ctrl.projects">
    <li ng-show="ctrl.condition(project.region)">{{project.name}}</li>
</ul>

<强>的javascript

 this.condition = function(field) {
        if (!this.filter) return true;
        var csvArr = this.filter.split(',');
        for (var i = 0; i < csvArr.length; i++) {
            if (field === csvArr[i])
                return true;
        }
        return false;
    }

https://jsfiddle.net/ronapelbaum/svxL486n/7/