AngularJS : custom filter with special rules

Question

I'm trying to make multi filter, that filters three properties in object.

what I already did:

<div class="" ng-repeat="selectedCard in Cards | filter {
    status:filterValueStatus,
    monitorLevel:filterValueType,
    monitorSystem:filterValue
} ">

The problem is that I need to show the object if status equals to '2' , and not continue to the two filtered properties : monitorLevel and monitorSystem that come after. (It doesn't work). Also I need to show the object if status equals to '3' , then filter it by the two properties monitorLevel and monitorSystem.

In summary it needs to check the status and only after , to decide whether to make the other two filters or not.

The filter I built until now :

app.filter('cardFilter', ['$filter', function($filter) {
    return function(status, monitorLevel,monitorSystem) {
        if (status == '2') {
            return $filter('filter')(status);
        } else {
        return $filter('filter')(status,monitorLevel,monitorSystem);
        }
    };
}]);

the answer :

  <div class="" ng-repeat="selectedCard in Cards | filter: filterValueStatus == '2' ? {status:'2'} : {status:'3', monitorLevel:filterValueLevel, monitorSystem:filterValue}">

You could do it in one filter more than likely. What have you tried? — ajmajmajma, Dec 07 '15 at 17:28
I didn't try any thing, i don't know how to split this filter — Ariel Livshits, Dec 07 '15 at 17:29
There is no need to split it I don't think, you could just make one filter with a few if statements inside? — ajmajmajma, Dec 07 '15 at 17:30
I have never built a costume filter' do you have an example ? — Ariel Livshits, Dec 07 '15 at 17:31
maybe you can import the two other filters in the first filters, using dependency injection, and use $filter('filter')(array, expression, comparator) : https://docs.angularjs.org/api/ng/filter/filter ...which is a way to trigger filters in controllers/directives/services... and other filters. — Christian Bonato, Dec 07 '15 at 17:32
If you never built your own filter, what are the filters in your code ? Where do they come from ? — Christian Bonato, Dec 07 '15 at 17:32
each one of them is a variable, the filter only shows what eq to the variable — Ariel Livshits, Dec 07 '15 at 17:34
http://stackoverflow.com/questions/15868248/how-to-filter-multiple-values-or-operation-in-angularjs/21169596#21169596 . That is a little complex, I just googled around a bit, but the general idea is you can make a custom filter as complex (or not) as you need. Give it a shot, and if you get stuck, try posting the filter code here. — ajmajmajma, Dec 07 '15 at 17:36
app.filter('cardFilter', ['$filter', function($filter) { return function(status, monitorLevel,monitorSystem) { if (status == '1') return; if (status == '2') { return $filter('filter')(status); } return $filter('filter')(status,monitorLevel,monitorSystem); }; }]); — Ariel Livshits, Dec 07 '15 at 17:44

score 0 · Answer 1 · answered Dec 07 '15 at 17:53

0

You can split your filters into 2 and use ternary operation. You get the concept:

<div ng-repeat="selectedCard in Cards | filter : { status:filterValueStatus} |
   filter : selectedCard.status === 2 ? {} : {
        monitorLevel:filterValueType,
        monitorSystem:filterValue
   } 
} ">

answered Dec 07 '15 at 17:53

Qi Tang

1,165
6
17

what does this mean : filter : selectedCard.status === 2 ? {} : – Ariel Livshits Dec 07 '15 at 17:56
selectedCard.status === 2 ? {} : { monitorLevel:filterValueType, monitorSystem:filterValue }. This is a ternary operation. If status is equal to 2 the your result will be filtered by an empty object(which does no filtering). Otherwise it will filter the result by monitorLevel and monitor System – Qi Tang Dec 07 '15 at 17:58
this part doesn't work: filter : selectedCard.status == '2' ? {} : {monitorLevel:filterValueType,monitorSystem:filterValue} – Ariel Livshits Dec 07 '15 at 18:13
I am sorry. I think I am wrong. You will still have to create a customized filter for your purpose – Qi Tang Dec 07 '15 at 18:16
I change it , and now it works , it suppose to be like this : – Ariel Livshits Dec 07 '15 at 18:25
– Ariel Livshits Dec 07 '15 at 18:25

Ariel Livshits · Answer 2 · 2015-12-07T22:04:01.713

0

the answer is not so complex as I thought it would be as start.

<div class="" ng-repeat="selectedCard in Cards | filter: filterValueStatus == '2' ? {status:'2'} : {status:'3', monitorLevel:filterValueLevel, monitorSystem:filterValue}">

It first , check if status equals to '2' and only afterwords filters the cards, according to the status.

edited Dec 07 '15 at 22:04

answered Dec 07 '15 at 18:30

Ariel Livshits

591
1
7
23

AngularJS : custom filter with special rules

2 Answers2