Using angularjs custom filter instead of a function to perform a search

Question

I am currently using a filter function (not a custom filter) on ng-repeat. However I have been told that using a custom filter is better performance. How would I go about using a custom filter to do the same search as this:

        $scope.searchInOrder = function (item)
        {
            if($scope.search)
            {
                if(item.match("^"+$scope.search, "i"))
                {
                    return item;
                }
            }
            else
            {
                return item;
            }
        }

Here is my fiddle.

So I use this filter using "key in keyboard.keys | filter: searchInOrder" but how do I do the same thing using a custom filter e.g. "key in keyboard.keys | customSearchInOrder:search" is it better for performance doing it this way (with a custom filter instead of a function) and if so why? Also which way is better for code maintainability?

Manish · Accepted Answer · 2017-06-08 04:30:06Z

1

Which way is better? This totally depends on your requirements and application. Because repeated filter may lead to performance issues. As explained in this very good post Angular Performance tips . So its for you to decide wha will be the best fir for your case a custom filter or filtering in code.

But if you are not worried about this then yes a custom filter would be good. As it will be reusable and you need not to repeat the filtering again in case you need the same filter for different views/controllers. Below is a custom filter for your case.

Updated Fiddle

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {



  $scope.keyboard = {
    "keys": ["cntrlA", "cntrlB", "cntrlC", "cntrlD", "space1", "space2", "space3", "shift"]
  }

});

app.filter('searchKeys', function() {
  return function(items, search) {
    var filtered = [];
    if (search) {
      angular.forEach(items, function(item) {
        if (item.match("^" + search, "i")) {
          filtered.push(item);
        }
      });
    }else{
    	filtered=items;
    }
    return filtered;
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div data-ng-app='myApp' data-ng-controller='myCtrl'>

  <!-- using scope function as a filter -->
  <input ng-model="search" placeholder="Search..." />
  <div ng-repeat="key in keyboard.keys | searchKeys: search">
    {{key}}
  </div>
</div>

Hope it helps :).

answered Jun 8, 2017 at 4:30

Manish

5,0963 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

AKMorris Over a year ago

Thanks, when you say "repeated filter may lead to performance issues" is this in a search context? The article you linked seems to be applying the filter to static text and not elements generated by ng-repeat; and being a function my first method is just as re-useable as the custom filter you provided so I still see no reason for choosing one method over the other...

Manish Over a year ago

repeated filters in the sense that. That suppose you data is changing in short duartion and you have a filter applied it will execute again and again, that may have performance issues. because each time i changes you have to filter it. The article just quotes one example. And for a detailed view on Pros and cons read this stackoverflow.com/questions/11761858/…

AKMorris Over a year ago

What you are describing is the same case for using a filter as (A)$scope.function and a custom filter as (B)app.filter I am asking what is the difference between the two (A and B) and which one is better. They are both filters that can be reused... Please stop posting links about the pros and cons of filters that is not what I am asking!

Manish Over a year ago

To answer that the very first thing I told is that it's for you to decide based on your requirements. Whichever suits you the best go for that.

AKMorris Over a year ago

Ahh ok thanks, ill edit my question - mainly my requirements are for performance and code maintenance.

Collectives™ on Stack Overflow

Using angularjs custom filter instead of a function to perform a search

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related