Angularjs Introductory Tutorials in the filter detailed _angularjs

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

Please reset the working directory:

Git checkout-f step-9

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

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

Custom Filters

To create a new filter, first create a phonecatfilters module and register the custom filter with the 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 on our main module PHONECAT.

App/js/app/js

...
Angular.module (' Phonecat ', [' phonecatfilters ']).
...

Template

Because our template code is written in the App/js/filter.js file, we need to introduce this file into the layout template.

App/index.html

...
 <script src= "Js/controllers.js" ></script>
 <script src= "Js/filters.js" ></script>
...

The syntax for using filters in the Angularjs template 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 can actually be done easily.

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 you need to configure our test injector for the Phonecatfilters module before performing any filter tests.

Execute./scripts/test/sh run the test, 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 the Angularjs built-in filters and add the following bindings to the index.html:

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 the 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 use ANGULARJS to continue enriching our mobile Details page.

The above is the ANGULARJS filter data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!