Angular JS Filter or statement

Question

I have a ng-repeat statement for projects. I then have a dropdown that selects the region the project was in. I have it working if its a single region but i need to check for projects in multiple regions. Example they selected Africa and North America.

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

I need it to be like this:

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

I have tried to pass it an object, and I have also tried what I saw in another post about a function that passes like this:

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

Any suggestions or help is super appreciated. The object has a project.region that it is comparing to and can have any number of values. So any selected region I would want to show.

Possible solution is to create a custom filter: http://stackoverflow.com/questions/15868248/how-to-filter-multiple-values-or-operation-in-angularjs — Narain Mittal, Mar 14 '16 at 21:43
Thanks NMittal but i tried that as well. Only returns the first object matches not both — eip56, Mar 14 '16 at 21:54

score 1 · Answer 1 · answered Mar 14 '16 at 22:26

I haven't tried that yet, But I believe you should be able to pass an array to your custom filters and apply the filter logic in there. Something like below:

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

And

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

Where regions is an array of the selected regions you want as your filter criteria.

On a side note, your syntax to orderBy seems wrong. It should be like {{ orderBy_expression | orderBy : expression : reverse}}

score 0 · Answer 2 · answered Mar 14 '16 at 22:32

Your solution will probably be somthing like building a custom filter.

So, if you have a list of possible criteria , separated by ',' (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;
        });
    }
})

this filter is usin javascript avnilla filter() function.

see in JSFiddle: https://jsfiddle.net/ronapelbaum/svxL486n/

Better Solution

using complex filters for arrays in angular might cost you in performance. in that case, i'de recommand using a simple condition with 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/

Angular JS Filter or statement

2 Answers2