step-9 checkmark filter

- Added custom checkmark filter - Update phone detail template to use checkmark filter - Added spec for the filter
angular · Dec 22, 2014 · 4147d18 · 4147d18
1 parent 8564fb4
commit 4147d18
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 6 deletions.
diff --git a/app/index.html b/app/index.html
@@ -9,6 +9,7 @@
   <script src="bower_components/angular-route/angular-route.js"></script>
   <script src="js/app.js"></script>
   <script src="js/controllers.js"></script>
+  <script src="js/filters.js"></script>
 </head>
 <body>
 

diff --git a/app/js/app.js b/app/js/app.js
@@ -4,7 +4,8 @@
 
 var phonecatApp = angular.module('phonecatApp', [
   'ngRoute',
-  'phonecatControllers'
+  'phonecatControllers',
+  'phonecatFilters'
 ]);
 
 phonecatApp.config(['$routeProvider',

diff --git a/app/js/filters.js b/app/js/filters.js
@@ -1,3 +1,9 @@
 'use strict';
 
 /* Filters */
+
+angular.module('phonecatFilters', []).filter('checkmark', function() {
+  return function(input) {
+    return input ? '\u2713' : '\u2718';
+  };
+});
diff --git a/app/partials/phone-detail.html b/app/partials/phone-detail.html
@@ -48,9 +48,9 @@ <h1>{{phone.name}}</h1>
       <dt>Bluetooth</dt>
       <dd>{{phone.connectivity.bluetooth}}</dd>
       <dt>Infrared</dt>
-      <dd>{{phone.connectivity.infrared}}</dd>
+      <dd>{{phone.connectivity.infrared | checkmark}}</dd>
       <dt>GPS</dt>
-      <dd>{{phone.connectivity.gps}}</dd>
+      <dd>{{phone.connectivity.gps | checkmark}}</dd>
     </dl>
   </li>
   <li>
@@ -79,7 +79,7 @@ <h1>{{phone.name}}</h1>
       <dt>Screen resolution</dt>
       <dd>{{phone.display.screenResolution}}</dd>
       <dt>Touch screen</dt>
-      <dd>{{phone.display.touchScreen}}</dd>
+      <dd>{{phone.display.touchScreen | checkmark}}</dd>
     </dl>
   </li>
   <li>
@@ -92,9 +92,9 @@ <h1>{{phone.name}}</h1>
       <dt>Audio / headphone jack</dt>
       <dd>{{phone.hardware.audioJack}}</dd>
       <dt>FM Radio</dt>
-      <dd>{{phone.hardware.fmRadio}}</dd>
+      <dd>{{phone.hardware.fmRadio | checkmark}}</dd>
       <dt>Accelerometer</dt>
-      <dd>{{phone.hardware.accelerometer}}</dd>
+      <dd>{{phone.hardware.accelerometer | checkmark}}</dd>
     </dl>
   </li>
   <li>

diff --git a/test/unit/filtersSpec.js b/test/unit/filtersSpec.js
@@ -4,4 +4,15 @@
 
 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');
+    }));
+  });
 });