Title: ng-repeat crashing for large data
Tags: javascript;angularjs
Question: I have an object with say around 100k objects inside it. And I am using ng-repeat to list those objects. The problem is I also have filters with ng-repeat and whenever I make a particular in the filters my UI freezes. How do I fix this?
<h3&gt;Filters</h3&gt;
<input type=&quot;number&quot; placeholder=&quot;start id&quot; ng-model=&quot;start_id&quot;&gt;
<input type=&quot;number&quot; placeholder=&quot;number of items&quot; ng-model=&quot;quantity&quot;&gt;
<input type=&quot;text&quot; placeholder=&quot;enter name&quot; ng-model=&quot;name&quot;&gt;
<ul ng-repeat=&quot;data in json | custom:start_id:quantity:name&quot;&gt;
<li&gt;{{75b5:f2c1:f5d7:b954:8dc3:cee9:baf:a8c0ta.id}} {{75b5:f2c1:f5d7:b954:8dc3:cee9:baf:a8c0ta.name}} -------------- {{75b5:f2c1:f5d7:b954:8dc3:cee9:baf:a8c0ta.timeStamp}}</li&gt;
</ul&gt;
myApp.filter('custom', function() {
return function(input, start_id,quantity,name) {
if (!input) return input;
var len=0;
var result = {};
angular.forEach(input, function(value, key) {
if ((start_id===undefined || key&gt;=start_id) &amp;&amp; (quantity==undefined || len<quantity)) {
if(name!==undefined){
var actual = value.name.toLowerCase();
var expected = name.toLowerCase();
if (actual.indexOf(expected) !== -1){
result[key] = value;
len++;
}
}else{
result[key] = value;
len++;
}
}
});
return result;
Comment: The only way would be implementing `Virtual Scrolling`. There are many ready to use libraries available out there with virtual scrolling support or you can implement on your own if nothing fits for your requirement.

Comment: You are returning an object instead of array. Try `return input.filter(...`


Here is another answer: You can take two ways.
Paging, if your user accept;
Virtual list, for example: https://github.com/2fdevs/angular-virtual-list

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:04/13/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><angularjs>', 'Title': 'ng-repeat crashing for large data', 'ViewCount': 37, 'id': 67079010, 'user_AboutMe': None, 'user_AccountId': 18131019.0, 'user_DisplayName': 'Satyaki Das', 'user_Reputation': 107.0, 'user_Views': 27.0, 'user_id': 13186127.0}}