AngularJS introduction tutorial: Filter details

In this step you will learn how to create your own display filter.

Please reset the working directory:

git checkout -f step-9

Now go to a mobile details page. In the previous step, the phone details page displays "true" or "false" to indicate whether a phone has a specific feature. Now we use a custom filter to graph those text strings: √ as “true”; and × as “false”. Let's see what the filter code looks like.

The most important differences between Step 8 and Step 9 are listed below. You can see the complete difference in GitHub.

Custom filters

To create a new filter, first create a phonecatFilters module and register the customized filter with this module.

app/js/

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

Our filter is named checkmark. Its input is either true or false, and we return two unicode characters (\u2713 and \u2718) that represent true or false.

Now that our filter is ready, we need to register our phonecatFilters module as a dependency to our main module phonecat.

app/js/app/js

...
('phonecat', ['phonecatFilters']).
...

template

Since our template code is written in the app/js/ file, we need to introduce this file in the layout template.

app/

...
 <script src="js/"></script>
 <script src="js/"></script>
...

The syntax for using filters in AngularJS templates is:

{{ expression | filter }}

We apply the filter to the phone details template:

app/partials/

...
  <dl>
   <dt>Infrared</dt>
   <dd>{{ | checkmark}}</dd>
   <dt>GPS</dt>
   <dd>{{ | checkmark}}</dd>
  </dl>
...

test

Filters, like other components, should be tested, and these tests are actually easy to complete.

test/unit/

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');
  }));
 });
});

Note that before performing any filter tests, you need to configure our test injector for the phonecatFilters module.

Execute ./scripts/test/sh to run the test, and you should see the following output:

Chrome: Runner reset.
....
Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
 Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)

Now let's practice AngularJS built-in filter and add the following bindings:

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

We can also use an input box to create a model and combine it with a filtered binding. Add the following code to:

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

Summarize

Now that you know how to write and test a custom plugin, in step 10 we will learn how to continue to enrich our mobile phone details page with AngularJS.

The above is a compilation of the information on AngularJS filter. We will continue to add relevant information in the future. Thank you for your support to this site!