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/filters.js
angular.module('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
...angular.module('phonecat', ['phonecatFilters'])...template
Since our template code is written in the app/js/filter.js file, we need to introduce this file in the layout template.
app/index.html
... <script src="js/controllers.js"></script> <script src="js/filters.js"></script>...
The syntax for using filters in AngularJS templates is:
{{ expression | filter }}
We apply the filter to 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 other components, should be tested, and these tests are actually easy to complete.
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'); })); }); }); });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 to index.html:
We can also use an input box to create a model and combine it with a filtered binding. Add the following code to index.html:
<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!