Handling multiple filters in angularjs

Question

I am using ng-repeat to render a complex set of data in the UI. After receiving the data, I need to filter the data based on some checkboxes, sliders etc. Right now I will have 6 custom filters, based on time, price, and some checkboxes. I am using them like following

ng:repeat="response in searchResponse|filter:filter1(response)|filter:filter2(response)|filter:filter3(response)|filter:filter4(response)|filter:filter5(response)|filter:filter6(response)|limitTo:totalDisplayed

This works fine but I think this is a very expensive way of applying filters. I have noticed a considerable lag in performance in rendering after this. Is there a better way to handle filters here ? Considering the fact that I may have more such filters in future.

Please suggest. Thanks !

Idkt · Accepted Answer · 2014-03-24 08:53:40Z

1

Instead of chaining filters, why not something like:

ng:repeat="response in searchResponse|filter:genericFilter(response, filterConditions)|limitTo:totalDisplayed

What you're doing is like chaining filters one after another, and that may not necessarily be needed – one filter that selects out the results based on filterConditions

answered Mar 24, 2014 at 8:53

Idkt

3,0034 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sanjeev Over a year ago

Yes, chaining filters is not good. I will try your suggestion.

Sanjeev Over a year ago

In my case, filterCondition will be changed by another function, how would I apply the filter in that case ? Do I need to call the genericFilter again from the controller somehow ?

Idkt Over a year ago

You can bind conditions using ngModel, and then use whatever is the model as the condition – or a collection of using models as a combined condition. Something in the lines of <input ng-model="searchsomething"></input> and then that model is accessible in the filter to be used as filterCondition or a part of it. I'd suggest you read up about ngModel

Sanjeev Over a year ago

So basically all the filter conditions I had were being executed initially for all the data which was not required. This was causing additional time while rendering the data. I have added a flag in filters to not apply them for the first time. I have kept the chained filters as they are for now. Thanks anyways, you made me think more in the right direction :)

Collectives™ on Stack Overflow

Handling multiple filters in angularjs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related