CODEWITHSUNDEEP
javascriptangularjs
Satyaki Das
Satyaki Das

Reputation: 157

ng-repeat crashing for large data

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>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;
    }
});

Upvotes: 0

Views: 86

Answers (1)

shauvet
shauvet

Reputation: 96

You can take two ways.

  1. Paging, if your user accept;

  2. Virtual list, for example: https://github.com/2fdevs/angular-virtual-list

Upvotes: 1

Related Questions