👀 Views: 42 💬 Answers: 1 📅 Created: 2025-06-16

angularjs ng-repeat performance JavaScript

I'm following best practices but I'm experiencing severe performance degradation when using `ng-repeat` alongside `ng-if` in my AngularJS 1.8 application, especially with large datasets (around 10,000 items). The combination seems to be causing a lot of unnecessary re-evaluations, leading to noticeable lag in my application. I have the following code snippet: ```html <div ng-repeat="item in items" ng-if="item.isVisible"> <p>{{ item.name }}</p> </div> ``` The `items` array is populated from an API call and then filtered based on a visibility flag. However, when filtering through a large dataset, the UI becomes unresponsive. I've tried using `track by` in my `ng-repeat`, but it didn’t help. It looks something like this: ```html <div ng-repeat="item in items track by item.id" ng-if="item.isVisible"> <p>{{ item.name }}</p> </div> ``` I also considered using a filter function directly in the `ng-repeat` like this: ```html <div ng-repeat="item in items | filter:{isVisible:true}"> <p>{{ item.name }}</p> </div> ``` However, that didn't show a important performance improvement either. I noticed that the console shows warnings about too many watchers when I inspect it: ``` AngularJS: 10/10 watchers limit reached, increase the limit with `$scope.$watchersLimit`. ``` I’m not sure how to tackle this scenario or if there's a more efficient way to handle conditional rendering with such a large dataset. Any advice on optimizing this pattern would be greatly appreciated! For reference, this is a production CLI tool.