I came across an interesting article on optimizing ng-repeat in AngularJS that discussed the following:
An AngularJS filter in your HTML will run multiple times during every digest cycle, even if there have been no changes in the data or conditions. This repetitive execution is a result of how AngularJS operates.
The reason for this behavior is related to how AngularJS functions, requiring multiple cycles to ensure everything is set correctly.
In essence, code like this:
<div ng-repeat="stock in ctrl.stocks | filter: ctrl.searchField">
{{stock.name}}
</div>
Can be optimized to:
<div ng-repeat="stock in ctrl.filteredStocks">
Pre Filtered {{stock.name}}
</div>
Using a method similar to the one below:
self.filter = function() {
console.log(1); //for counter
self.searchField = self.searchFieldModel;
self.filteredStocks = filterFilter(self.stocks, self.searchField);
};
To keep track of how many times the filtering process is executed, a console.log statement can be added within the controller.
Question
For observation purposes - How can I monitor the number of times the filter in :
<... ng-repeat="stock in ctrl.stocks | filter: ctrl.searchField">
is running?