Using AngularJS Filter Inside the Controller

By

The filter functionality of AngularJS is often used inside the view when you need to filter a set of items in a collection. I had overlooked the usefulness this might have as a tool inside the controller as well. It can be very useful in “querying” information.

When I say “using filter” I am referring to the filter named “filter” not just the $filter service.

Suppose you have the following:

// sample collection of objects
var myObjects = [
    { name: "Object1", shape: "circle", color: "red" },
    { name: "Object2", shape: "square", color: "orange" },
    { name: "Object3", shape: "triangle", color: "yellow" },
    { name: "Object4", shape: "circle", color: "green" },
    { name: "Object5", shape: "sphere", color: "blue" },
    { name: "Object6", shape: "hexagon", color: "indigo" },
    { name: "Object7", shape: "square", color: "violet" },
    { name: "Object8", shape: "triangle", color: "red" }
];

You can easily get an array of just the objects matching a specific criteria:

// return an array with only red objects
var myRedObjects = $filter('filter')(myObjects, { color: "red" });

This also works if you need to match on multiple properties:

var myRedObjects = $filter('filter')(myObjects, { shape: "circle", color: "red" });

The filter always returns an array whether there is many, one or zero matching objects:

// return an array with only green objects (in this case - an array of one
var myGreenObject = $filter('filter')(myObjects, { color: "green" });

// When you don't get anything back (returns an empty array)
var niceTry = $filter('filter')(myObjects, { color: "white" });

If you are feeling lucky, you can even try to grab the first element for immediate use. (Although it would probably be good form to actually check to see if you got a result back first.)

// If you are feeling really lucky that you are going to find one
// and want to just grab the first one
var luckyGrab = $filter('filter')(myObjects, { color: "green" })[0];
Matt Bonneau
Latest posts by Matt Bonneau (see all)

17 responses to “Using AngularJS Filter Inside the Controller”

  1. it gives matching results.
    For example if you filter which are having “acc” values, it also gives those containing “accepted” in o/p .

    Can you post for exact match filter?

    Reply

  2. Be aware that if you need to filter for an exact match, i.e. on an id property, then make sure you pass ‘true’ as the third argument to the filter function.

    Reply

    1. How to do something that those rows should be returned shape==’square’ OR color==”orange’

      And finally having result with 2 rows where:-
      { name: “Object2”, shape: “square”, color: “orange” },
      { name: “Object7”, shape: “square”, color: “violet” },

      Reply

    1. The “normal” way to use the filter is inside the view.

      Whether one way or the other is better really depends on what you are trying to do. If your filter is needed to help your view present information to the user, then it makes sense to keep that in the view. Same with a search box that is filtering a local data source.

      This post just highlights the fact that you can use the filter in the controller as well if there is a situation where you want to find an object or objects in a collection using controller code.

      Reply

  6. Hi,
    Thanks for the tutorial.
    But how can you filter rows that have color of ‘red’ OR ‘Indigo’.
    I couldn’t find it anywhere!

    Reply

    1. Hi Shilan,

      To do more complex logic, you can use a function as a selector:

      $filter(‘filter’)(myObjects, function (o) {
      return o.color == “red” || o.color == “indigo”;
      });

      Hope that helps.

      Reply

  8. Hi,
    Thanks for the tutorial.
    my selected array is :- $scope.selection = [‘red’, ‘green’];

    var myObjects = $filter(‘filter’)(myObjects, { color: “red” });

    Here how i can filter row that have color of ‘red’ and ‘green’

    Reply

Leave a Reply