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

Answer 1

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.

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

This is not a filter but you can use a ng-hide directive evaluating the $index for the array as following:

<div class="col-sm-12 col-lg-12" ng-repeat="message in messages | orderBy: '-id' as filtered_result track by message.id  ">
  <div class="card-box widget-user" ng-hide="{{$index >= 4}}">
    <div>
      <img ng-src="{{message.imageUrl}}" class="img-responsive" alt="{{message.imageUrl}}">
      <div class="wid-u-info">
        <h3 class="m-t-0 m-b-5">{{message.title }}</h3>
        <p class="text-muted m-b-5 font-13" ng-bind-html="message.content | ellipsis:147 | trusted"></p>
        <!-- <p class="text-muted m-b-5 font-13">{{message.content | limitTo:130}}</p> -->
        <small class="label" ng-class="{'label-success':message.type=='Message','label-warning':message.type=='Announcement'}"><b>{{message.type}}</b></small>
      </div>
    </div>
  </div>
</div>

Answer 4

CRUD should be handled in a factory or service, not in the controller. My understanding is that a controller is only responsible for communication between the views and services.

Edit 1: excerpt from John Papa Style Guide (Angular -1) - Defer logic in a controller by delegating to services and factories.

Why?: Logic may be reused by multiple controllers when placed within a service and exposed via a function.

Why?: Logic in a service can more easily be isolated in a unit test, while the calling logic in the controller can be easily mocked.

Why?: Removes dependencies and hides implementation details from the controller.

Why?: Keeps the controller slim, trim, and focused.

https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y035

Answer 5

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