👀 Views: 120 💬 Answers: 1 📅 Created: 2025-06-13

angularjs ng-repeat performance digest-cycle javascript

I tried several approaches but none seem to work. I'm working with a performance scenario with AngularJS 1.8 when trying to render a list of items using `ng-repeat` where each item can have a nested list of child items. My current implementation is causing excessive `$digest` cycles, leading to slow performance and an unresponsive UI, especially when the nested lists contain many items. Here's a simplified version of my code: ```javascript $scope.items = [ { name: 'Item 1', children: [ { name: 'Child 1.1' }, { name: 'Child 1.2' } ] }, { name: 'Item 2', children: [ { name: 'Child 2.1' }, { name: 'Child 2.2' } ] } ]; ``` In my HTML, I have the following structure: ```html <div ng-repeat="item in items"> <h3>{{ item.name }}</h3> <ul> <li ng-repeat="child in item.children">{{ child.name }}</li> </ul> </div> ``` The question arises when I try to update the `items` array dynamically based on user input, which seems to trigger multiple `$digest` cycles. I checked the console and noticed I receive the following warning: ``` [AngularJS: $rootScope:infdig] 10 $digest() iterations reached. Aborting! ``` I thought about implementing one-time bindings for the child elements, but that doesn't seem feasible since the nested data can change based on user interactions. I've also tried using `track by` in my `ng-repeat`, but the performance optimization continue. I've considered using a custom filter to limit the items dynamically displayed, but I'm unsure how to implement this effectively without running into the same scenario. What strategies or best practices can I employ to optimize the performance of `ng-repeat` with nested structures in AngularJS 1.8, while still allowing for dynamic updates? Any advice or examples would be greatly appreciated. Thanks in advance!