I’m pretty much new to angular, but I feel like this is kind of crazy.
I’ve got multiple collections being displayed via ng-repeat in one controller scope. There’s an input field for each list to perform a simple query. I was playing around with various filters in my code and I ended up putting a console.log in my filter function. I realized that every time my filter function was called for one list, it was being called for all of the lists in the scope. Furthermore, it was calling the filter function twice each time. So with 3 collections, filtering one of the lists would call the filter function 6 times.
I thought maybe it was just my custom filter, so I tried it out on the default filter function. Same story. Here’s my code:
Go to the console and see for yourself :/
What am I doing wrong here? This seems like such a simple thing but it’s doing so much work.
Problem courtesy of: John Fawcett
This is normal, angularjs uses a ‘dirty-check’ approach, so it needs to call all the filters to see if any changes exist. After this it detects that you have a change on one variable (the one that you typed) and then it re-executes all filters again to detect if it has other changes.
See the first answer of this question
Solution courtesy of: Renan Tomal Fernandes