AngularJs Performance of Filter vs Filter inside Controller

Question

Like the title says, what is the best approach to filter a list of ng-repeat? To use a custom (or existing) .filter() or to create a custom filter function inside my controller?

The reason why I'm asking it is because the .filter() is called multiple times (everytime there is a dygest cycle according to this answer).

So I'm concerned about performance issue. If I have a huge list to use inside the ng-repeat and need to filter it, isn't it going to take a huge impact when using .filter()?

On the other hand, when using a custom filter function inside a controller I'll only filter the list when it's needed and only once. I have a better control over this part.

Is this a correct logic? Or is there any other way to optimize the use of filters?

Answer 1

I believe you were asking something like this? (Check log)

https://plnkr.co/edit/B0WSa11DWcCaImEoexVh?p=preview

So like the post you linked (which linked in to a fiddle) it truly fires filters two times inside ng-filter but if you make the sort inside your controller it will only be hit once.

Edit

My suggestion would be that if you have a large object coming in which need to be sorted is:

1. Back-end sort(if possible)

2. Sort using a function inside the controller

3. (Make a custom filter which will skip the filtering on the first go and return the original? :I )

Video explaining about filters: http://www.bennadel.com/blog/2766-stateless-filters-don-t-apply-to-objects-arrays-or-ngrepeat-in-angularjs-1-3.htm

Answer 2

The best way to actually do that is the build in "directive". As shown(Ill Post multiple examples.) :

app.controller('MainCtrl', function($scope) {
   $scope.Items= [
       { id: 1, color: 'lightblue' },
       { id: 2, color: 'blue' }
   ];
});

div ng-repeat="item in Items| filter: { color: 'blue' }"> 

Or you could do it with

Functions

 app.controller('MainCtrl', function($scope) {
           $scope.friends= [
               { id: 1, name: 'John' },
               { id: 2, name: 'Richard' }
           ];
           $scope.searchText= function (item) { 
               return item === 'John'; 
            }
        });



 <div ng-repeat="friend in friends | filter: searchText">

EDIT2

So for nested arrays...

app.controller('MainCtrl', function($scope) {
               $scope.colors= [
                   {color:['blue','green','red']}
               ];
            });

Then you would do...

<div ng-repeat="color in colors">
  <div ng-repeat="uniqueColor in color">
     {{uniqueColor}}
  </div>
</div>

Here you dont even need a filter.. I like to call this a "nested ng-repeat" :D.

Here is a fiddle for better demonstration..

EDIT3

Now filtering the ng-repeat..

<div ng-repeat="color in colors">
      <div ng-repeat="uniqueColor in color | filter: 'Blue'">
         {{uniqueColor}}
      </div>
    </div>

Fiddle of that represented here..

EDIT4

you can just use as i read:

app.filter("filterName", function(){
  return function(obj){
   return "Apple.inc"
  }
})

Fiddle