How to use angularjs filters

What Is an AngularJS Filter?

Selects a subset of items from an array and returns it as a new array.

A filter is similar to a factory or service in that it is registered on the module. However, filters are specifically designed for data transformation and are invoked in templates using the pipe (|) syntax.

Warning

Since AngularJS is now a deprecated framework, you can use modern JavaScript frameworks like Vue.js, React, and Angular instead.

Basic Usage of AngularJS Filters

In HTML Template Binding

Example of HTML usage

{{ array | filter : expression : comparator }}

expression defines the matching criteria (string, object, or function), and comparator (optional) controls whether strict equality (===) is used for comparisons.

In JavaScript

AngularJS filter example of JavaScript usage

$filter('filter')(array, expression, comparator)

AngularJS Custom Filter

As you know, AngularJS lets us create custom filters and use them like other filters. To do that, you can use the filter() function to create a filter inside your module. Let's see the syntax for creating a custom filter.

Example of AngularJS custom filter

angular.module("MyModule").filter("myFilter", function () {
  return function (input, arg1, arg2) {
    var output;
    // code ...
    return output;
  };
});

You can use this filter inside your controller, directive, etc., or inside your template with the syntax we provided. Now we are going to create a demo filter that lets you filter a user list by gender.

Demo Example of AngularJS Custom Filter

<!DOCTYPE html>
<html>
  <head>
    <title>www.W3docs.com</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  </head>
  <body ng-app="MyModule" ng-controller="MyController">
    <select ng-model="filterGender">
      <option value="male">Male</option>
      <option value="female">Female</option>
    </select>

    <ul>
      <li ng-repeat="user in users | gender:filterGender" ng-bind="user.name"></li>
    </ul>

    <script>
      angular
        .module("MyModule", [])
        .controller("MyController", function ($scope) {
          $scope.users = [
            { name: "Mike", gender: "male", age: 23 },
            { name: "Jenifer", gender: "female", age: 32 },
            { name: "Tom", gender: "male", age: 14 },
            { name: "Hayk", gender: "male", age: 18 },
            { name: "Eliana", gender: "female", age: 28 },
          ];
        })
        .filter("gender", function () {
          return function (users, gender) {
            if (!gender) {
              return users;
            }
            var arr = [];
            angular.forEach(users, function (v) {
              if (v.gender === gender) {
                arr.push(v);
              }
            });

            return arr;
          };
        });
    </script>
  </body>
</html>

Try it Yourself »