step-11 Custom Filters

- Implement a custom `checkmark` filter.
- Update the `phoneDetail` template to use the `checkmark` filter.
- Add a unit test for the `checkmark` filter.

app/app.module.js

@@ -3,6 +3,7 @@
 // Define the `phonecatApp` module
 angular.module('phonecatApp', [
   'ngRoute',
+  'core',
   'phoneDetail',
   'phoneList'
 ]);

app/core/checkmark/checkmark.filter.js

@@ -0,0 +1,9 @@
+'use strict';
+
+angular.
+  module('core').
+  filter('checkmark', function() {
+    return function(input) {
+      return input ? '\u2713' : '\u2718';
+    };
+  });

app/core/checkmark/checkmark.filter.spec.js

@@ -0,0 +1,14 @@
+'use strict';
+
+describe('checkmark', function() {
+
+  beforeEach(module('core'));
+
+  it('should convert boolean values to unicode checkmark or cross',
+    inject(function(checkmarkFilter) {
+      expect(checkmarkFilter(true)).toBe('\u2713');
+      expect(checkmarkFilter(false)).toBe('\u2718');
+    })
+  );
+
+});

app/core/core.module.js

@@ -0,0 +1,4 @@
+'use strict';
+
+// Define the `core` module
+angular.module('core', []);

app/index.html

@@ -9,6 +9,8 @@
     <script src="bower_components/angular-route/angular-route.js"></script>
     <script src="app.module.js"></script>
     <script src="app.config.js"></script>
+    <script src="core/core.module.js"></script>
+    <script src="core/checkmark/checkmark.filter.js"></script>
     <script src="phone-list/phone-list.module.js"></script>
     <script src="phone-list/phone-list.component.js"></script>
     <script src="phone-detail/phone-detail.module.js"></script>

app/phone-detail/phone-detail.template.html

@@ -48,9 +48,9 @@ <h1>{{$ctrl.phone.name}}</h1>
       <dt>Bluetooth</dt>
       <dd>{{$ctrl.phone.connectivity.bluetooth}}</dd>
       <dt>Infrared</dt>
-      <dd>{{$ctrl.phone.connectivity.infrared}}</dd>
+      <dd>{{$ctrl.phone.connectivity.infrared | checkmark}}</dd>
       <dt>GPS</dt>
-      <dd>{{$ctrl.phone.connectivity.gps}}</dd>
+      <dd>{{$ctrl.phone.connectivity.gps | checkmark}}</dd>
     </dl>
   </li>
   <li>
@@ -79,7 +79,7 @@ <h1>{{$ctrl.phone.name}}</h1>
       <dt>Screen resolution</dt>
       <dd>{{$ctrl.phone.display.screenResolution}}</dd>
       <dt>Touch screen</dt>
-      <dd>{{$ctrl.phone.display.touchScreen}}</dd>
+      <dd>{{$ctrl.phone.display.touchScreen | checkmark}}</dd>
     </dl>
   </li>
   <li>
@@ -92,9 +92,9 @@ <h1>{{$ctrl.phone.name}}</h1>
       <dt>Audio / headphone jack</dt>
       <dd>{{$ctrl.phone.hardware.audioJack}}</dd>
       <dt>FM Radio</dt>
-      <dd>{{$ctrl.phone.hardware.fmRadio}}</dd>
+      <dd>{{$ctrl.phone.hardware.fmRadio | checkmark}}</dd>
       <dt>Accelerometer</dt>
-      <dd>{{$ctrl.phone.hardware.accelerometer}}</dd>
+      <dd>{{$ctrl.phone.hardware.accelerometer | checkmark}}</dd>
     </dl>
   </li>
   <li>