AngularJS filter

The filter

There are special data processing processes that you encounter when using AngularJS, and you can achieve the desired results for different data processing by using AngularJS filters.

In this step, you'll learn how to create your own custom display filters.

• In the previous step, the details page either displays "true" or "false" to indicate the presence of a phone feature. W e've used a custom filter to convert those text strings to another type: "true" to ?, "false" to ?. Let's see how the filter code looks.

Reset the workspace to step 9

git checkout -f step-9

Refresh your browser or check this step online: Step 9 Live Demo

The most important differences between steps 8 and 9 are listed below. You can see the full difference on GitHub.

Custom filters

To create a new filter, you're about to phonecatFilters module and register your custom filters with this module:

app/js/filters.js :

angular.module('phonecatFilters', []).filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '\u2718';
  };
});

The name of our filter is "checkmark". input is either true or false and returns one of the two unicode characters we selected to represent true and false ( \u2713 - sgt;? for true, \u2718 - s. false).

Now that our filters are ready, we need phonecatFilters module as a dependency on our main phonecatApp module.

app/js/app.js :

...
angular.module('phonecatApp', ['ngRoute','phonecatControllers','phonecatFilters']);
...

Template

Because filters live in app/js/filters.js folder, we need to include this file in our layout template.

app/index.html :

...
 <script src="/attachments/image/wk/angularjs/controllers.js"></script>
 <script src="/attachments/image/wk/angularjs/filters.js"></script>
...

The synths of using filters in the Angular template are as follows:

{{ expression | filter }}

Let's use this filter in the phone details template:

app/partials/phone-detail.html :

...
    <dl>
      <dt>Infrared</dt>
      <dd>{{phone.connectivity.infrared | checkmark}}</dd>
      <dt>GPS</dt>
      <dd>{{phone.connectivity.gps | checkmark}}</dd>
    </dl>
...

Test

Filters, like any other component, must be tested, and it is easy to write those tests.

test/unit/filtersSpec.js :

describe('filter', function() {

  beforeEach(module('phonecatFilters'));

  describe('checkmark', function() {

    it('should convert boolean values to unicode checkmark or cross',
        inject(function(checkmarkFilter) {
      expect(checkmarkFilter(true)).toBe('\u2713');
      expect(checkmarkFilter(false)).toBe('\u2718');
    }));
  });
});

We must call before we perform any filter beforeEach(module('phonecatFilters')) This call loads phonecatFilter module into the injector to test the run.

Note that we'll inject(function(checkmarkFilter) { ... }) get access to the file we want to test. See angular.mock.inject().

Note that when injected, the Filter is appended to your filter name. See the Filter Guide? section, where is the overview.

You must now see the following output in the Karma tab:

Chrome 22.0: Executed 4 of 4 SUCCESS (0.034 secs / 0.012 secs)

Experiment

• Let's experiment with some built-in Angular filters and add the following bindings index.html

  • {{ "lower cap string" | uppercase }}
  • {{ {foo: "bar", baz: 23} | json }}
  • {{ 1304375948024 | date }}
  • {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}

• We can create a module with an input element and combine it with a filter binding. Add the following code .html index:

  <input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}

Summarize

Now that you've learned how to write and test a custom filter, go to Step 10 Event Handler to learn how we can continue to enrich the phone details page with Angle.