My application is having performance issues when trying to list around 100k objects using ng-repeat along with filters. The UI freezes whenever I make a selection in the filters. How can I address this issue?
<h3>Filters</h3>
<input type="number" placeholder="start id" ng-model="start_id">
<input type="number" placeholder="number of items" ng-model="quantity">
<input type="text" placeholder="enter name" ng-model="name">
<ul ng-repeat="data in json | custom:start_id:quantity:name">
<li>{{::data.id}} {{::data.name}} -------------- {{::data.timeStamp}}</li>
</ul>
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 >= start_id) && (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;
}
});