In this chapter, you will learn how to effectively utilize AngularJS filters and services in your applications. Service types are essential tools required for code reuse, abstraction, and resource consumption in your application. Filters, however, are frequently glazed over in introductory courses as they are not considered integral to learning the framework basics. This is a pity as filters let you afford the ability to abstract and compartmentalize large chunks of application functionality cleanly.

All AngularJS filters perform the same class of operations on the data they are passed, but it is easier to think about filters in the context of a pseudo-dichotomy in which there are two kinds: data filters and search filters.

At a very high level, AngularJS data filters are merely tools that modulate JavaScript objects cleanly in the template. On the other half of the spectrum, search filters have the ability to select elements of an enumerable collection that match some of the...

Two of the most basic built-in filters are uppercase and lowercase filters, and they can be used in the following fashion.

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.data = {
    text: 'The QUICK brown Fox JUMPS over The LAZY dog',
    nums: '0123456789',
    specialChars: '!@#$%^&*()',
    whitespace: '   '
  };
});

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <p>{{ data.text | uppercase }}</p>
    <p>{{ data.nums | uppercase }}</p>
    <p>{{ data.specialChars | uppercase }}</p>
    <p>_{{ data.whitespace | uppercase }}_</p>
  </div>
</div>

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG...

AngularJS has some built-in filters that are less simple, such as number and currency; they can be used to format numbers into normalized strings. They also accept optional arguments that can further customize how the filters work.

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.data = {
    bignum: 1000000,
    num: 1.0,
    smallnum: 0.9999,
    tinynum: 0.0000001
  };
});

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <p>{{ data.bignum | number }}</p>
    <p>{{ data.num | number }}</p>
    <p>{{ data.smallnum | number }}</p>
    <p>{{ data.tinynum | number }}</p>
  </div>
</div>

1,000,000
1
1.000
1e-7

The date filter is an extremely robust and customizable filter that can handle many different kinds of raw date strings and convert them into human readable versions. This is useful in situations when you want to let your server defer datetime processing to the client and just be able to pass it a Unix timestamp or an ISO date.

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.data = {
    unix: 1394787566535,
    iso: '2014-03-14T08:59:26Z',
    date: new Date(2014, 2, 14, 1, 59, 26, 535)
  };
});

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <p>{{ data.unix | date }}</p>
    <p>{{ data.iso | date }}</p>
    <p>{{ data.date | date }}</p>
  </div>
</div>

AngularJS provides you with a JSON conversion tool, the json filter, to serialize JavaScript objects into prettified JSON code. This filter isn't so much in use for production applications as it is used for real-time inspection of your scope objects.

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.user = {
    id: 123,
    name: {
      first: 'Jake',
      last: 'Hsu'
    },
    username: 'papatango',
    friendIds: [5, 13, 3, 1, 2, 8, 21], 
    // properties prefixed with $$ will be excluded
    $$no_show: 'Hide me!'
  };
});

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <pre>{{ user | json }}</pre>
  </div>
</div>

{
  "id": 123,
  "name": {
    "first...

Filters are built to perform template data processing, so their utilization outside the template will be infrequent. Nonetheless, AngularJS provides you with the ability to use filter functions via an injection of $filter.

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.val = 1234.56789;
});

data | filter : optionalArgument

<p>{{ val | number : 4 }}</p>

1,234.5679

(app.js)

angular.module('myApp', [...

Search filters serve to evaluate individual elements in an enumerable object and return whether or not they belong in the resultant set. The returned value from the filter will also be an enumerable set with none, some, or all of the original values that were removed. AngularJS provides a rich suite of ways to filter an enumerable object.

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.users = [
    'Albert Pai',
    'Jake Hsu',
    'Jack Hanford',
    'Scott Robinson',
    'Diwank Singh'
  ];
});

As AngularJS search filters simply reduce the modulation functions that return a subset of the object that is passed to it, it is possible to chain multiple filters together.

When filtering enumerable objects, AngularJS provides two built-in enumeration filters that are commonly used in conjunction with the search filters: limitTo and orderBy.

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.users = [
    {name: 'Albert Pai'}, 
    {name: 'Jake Hsu'},
    {name: 'Jack Hanford'},
    {name: 'Scott Robinson'},
    {name: 'Diwank Singh'}
  ];
});

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <input type="text" ng-model="search.val" />
    <!—- simple repeater filtering against search.val...

At some point, the provided AngularJS data filters will not be enough to fill your needs, and you will need to create your own data filters. For example, assume that in an application that you are building, you have a region of the page that is limited in physical dimensions, but contains an arbitrary amount of text. You would like to truncate that text to a length which is guaranteed to fit in the limited space. A custom filter, as you might imagine, is perfect for this task.

(app.js)

angular.module('myApp', [])
.filter('simpletruncate', function () {
  // the text parameter 
  return function (text) {
    var truncated = text.slice(0, 100);
    if (text.length > 100) {
      truncated += '...';
    }
    return truncated;
  };
});

AngularJS search filters work exceedingly well out of the box, but you will quickly develop the desire to introduce some customization of how the filter actually relates the search object to the enumerable collection. This collection is frequently composed of complex data objects; a simple string comparison will not suffice, especially when you want to modify the rules by which matches are governed.

Searching against data objects is simply a matter of building the search object in the same mould as the enumerable collection objects.

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
  $scope.users = [
    { 
      firstName: 'John',
      lastName: 'Stockton'
    },
    {
      firstName: 'Michael',
      lastName: 'Jordan'
    }
  ];
});

If you want to search only for exact matches, vanilla wildcard filtering becomes problematic as the default comparator uses the search object to match against substrings in the collection object. Instead, you might want a way to specify exactly what constitutes a match between the reference object and enumerable collection.

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
  $scope.users = [
    { 
      firstName: 'John',
      lastName: 'Stockton',
      number: '12'
    },
    {
      firstName: 'Michael',
      lastName: 'Jordan',
      number: '23'
    },
    {
      firstName: 'Allen',
      lastName: 'Iverson',
      number: '3'
    }
  ];
});

The provided search filters can serve your application's purposes only to a point. Eventually, you will need to construct a complete solution in order to filter an enumerable collection.

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
  $scope.users = [
    { 
      firstName: 'John',
      lastName: 'Stockton',
      number: '12'
    },
    {
      firstName: 'Michael',
      lastName: 'Jordan',
      number: '23'
    },
    {
      firstName: 'Allen',
      lastName: 'Iverson',
      number: '3'
    }
  ];
});

(app.js)

.filter('userSearch...