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

question from:https://stackoverflow.com/questions/14126905/ng-repeat-with-multiple-filters-on-large-data-set

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>