ng-repeat with multiple filters on large data set

Question

ng-repeat with multiple filters on large data set

I'm still new to AngularJS, so I'm just trying to do a simple CRUD app. Currently I pull the data (in a JSON file) with $http in a div handled by a controller MyCtrl1.

function MyCtrl1($scope, $http) {
    $http.get('data/accounts.json').success(function(data) {
        $scope.accounts = data;
    ...
    }); 
}

Inside this div is a table with the following tbody:

<tbody>
    <tr ng-repeat="account in accounts | orderBy:sort.field:sort.desc | startFrom:currentPage * pageSize | limitTo:pageSize">
        <td contentEditable="true" ng-repeat="(label, value) in account" ng-show="fields[label].visible">{{value}}</td>
    </tr>
</tbody>

The orderBy filter sorts according to a selected field; startFrom slices the array to start at a certain point; limitTo filters according to a preset page size. Without the pagination filters the performance was pretty terrible, but I was wonder if there was an alternative way to go about this?

I have Batarang for Chrome and under the Performance tab it showed ngRepeatWatch taking up the most time, and I reckon it has to do with all the filtering I'm doing..

angularjs

Answer 1

Just use

<tr ng-repeat="account in accounts | filter1 | filter2 | filter3" >
  <td contentEditable="true" ng-repeat="(label, value) in account" ng-show="fields[label].visible">{{value}}</td>
</tr>

Answer 2

I'd handle pagination in the controller or server-side. My guess is that ng-repeat is watching your entire list instead of just what it needs to watch, which is going to be very slow.

Answer 3

I know this question is old but for anyone in the future. Filtering in line is expensive (computationally) because it works directly on the DOM, if you are dealing with large amounts of data, 1000+ rows, it is much better to filter your collection in your controller then repeat on that instead.