In this step you will learn how to create your own custom display filter.
Navigate to one of the detail pages.
In the previous step, the details page displayed either "true" or "false" to indicate whether certain phone features were present or not. We have used a custom filter to convert those text strings into glyphs: â for "true", and â for "false". Let's see, what the filter code looks like.
The most important changes are listed below. You can see the full diff on GitHub:
In order to create a new filter, simply register your custom filter function with the
API.angular.filter
app/js/filters.js
:
angular.filter('checkmark', function(input) { return input ? '\u2713' : '\u2718'; });
The name of our filter is "checkmark". The input
evaluates to either true
or false
, and we
return one of two unicode characters we have chosen to represent true or false (\u2713
and
\u2718
).
Since the filter code lives in the app/js/filters.js
file, we need to include this file in our
layout template.
app/index.html
:
... <script src="js/controllers.js"></script> <script src="js/filters.js"></script> ...
The syntax for using filters in angular templates is as follows:
{{ expression | filter }}
Let's employ the 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> ...
Filters, like any other component, should be tested and these tests are very easy to write.
test/unit/filtersSpec.js
:
describe('checkmark filter', function() { it('should convert boolean values to unicode checkmark or cross', function() { expect(angular.filter.checkmark(true)).toBe('\u2713'); expect(angular.filter.checkmark(false)).toBe('\u2718'); }); })
To run the unit tests, execute the ./scripts/test.sh
script and you should see the following
output.
Chrome: Runner reset.
....
Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
Chrome 11.0.696.57 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
Let's experiment with some of the built-in angular filters
and add the
following bindings to index.html
:
{{ "lower cap string" | uppercase }}
{{ {foo: "bar", baz: 23} | json }}
{{ 1304375948024 | date }}
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
We can also create a model with an input element, and combine it with a filtered binding. Add the following to index.html:
<input name="userInput"> Uppercased: {{ userInput | uppercase }}
Now that you have learned how to write and test a custom filter, go to step 10 to learn how we can use angular to enhance the phone details page further.