ng-repeat with multiple filters on large data set

Question

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..

Answer 1

{{ expression | filter1 | filter2 }}

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> 

Angular 2 uses pipes, but its looks like filters:

<div>The chained hero's birthday is <p>{{  birthday | date:'fullDate' | uppercase}}</p> <div> 

Answer 2

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.