From 0a604bdb90e9dff9399bae0fb4941fe46cc7e9f9 Mon Sep 17 00:00:00 2001
From: Kenneth R. Culp
Date: Tue, 26 Apr 2011 09:54:08 -0700
Subject: Tutorial files for your perusal.

---
 docs/tutorial.step_9.ngdoc | 95 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100755 docs/tutorial.step_9.ngdoc

(limited to 'docs/tutorial.step_9.ngdoc')

diff --git a/docs/tutorial.step_9.ngdoc b/docs/tutorial.step_9.ngdoc
new file mode 100755
index 00000000..9fcf095d
--- /dev/null
+++ b/docs/tutorial.step_9.ngdoc
@@ -0,0 +1,95 @@
+@workInProgress
+@ngdoc overview
+@name Tutorial: Step 9
+@description
+<table id="tutorial_nav">
+<tr>
+<td id="previous_step">{@link tutorial.step_8 Previous}</td>
+<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-9/app Example}</td>
+<td id="tut_home">{@link tutorial Tutorial Home}</td>
+<td id="code_diff">{@link
+https://github.com/angular/angular-phonecat/commit/975d173ad0768487852387497c086f3c93fb48f6 Code
+Diff}</td>
+<td id="next_step">{@link tutorial.step_10 Next}</td>
+</tr>
+</table>
+
+In this step, we have determined that the built-in angular display filters ({@link
+angular.filter.number number}, {@link angular.filter.currency currency}, {@link
+angular.filter.date date}, etc.) do not handle what we want to do, and so we get to create our own
+custom {@link angular.filter filter}.  
+
+In the previous step, the details page displayed either "true" or "false" to indicate whether
+certain phone features were present or not.  Our custom "checkmark" filter replaces those text
+strings with images: ✓ for "true", and ✘ for "false".
+
+Our filter code lives in `app/js/filters.js`:
+
+__`app/index.html`.__ 
+<pre>
+...
+ <script src="app/js/filters.js"></script>
+...
+</pre>
+
+In the phone details template, we employ our filter for angular expressions whose values are
+"true" or "false"; `{{ [phone_feature] | checkmark }}`:
+
+__`app/partials/phone-detail.html`.__ 
+<pre>
+<img ng:src="{{phone.images[0].large}}" class="phone"/>
+<h1>{{phone.name}}</h1>
+<p>{{phone.description}}</p>
+...
+<ul class="specs">
+  ...
+  <li>
+    <span>Connectivity</span>
+    <dl>
+      <dt>Network Support</dt>
+      <dd>{{phone.connectivity.cell}}</dd>
+      <dt>WiFi</dt>
+      <dd>{{phone.connectivity.wifi}}</dd>
+      <dt>Bluetooth</dt>
+      <dd>{{phone.connectivity.bluetooth}}</dd>
+      <dt>Infrared</dt>
+      <dd>{{phone.connectivity.infrared | checkmark}}</dd>
+      <dt>GPS</dt>
+      <dd>{{phone.connectivity.gps | checkmark}}</dd>
+    </dl>
+  </li>
+...
+</ul>
+</pre>
+
+__`app/js/filters.js`.__ (New)
+<pre>
+/* http://docs.angularjs.org/#!angular.filter */
+
+angular.filter('checkmark', function(input) {
+  return input ? '\u2713' : '\u2718';
+});
+</pre>
+
+
+## Discussion:
+
+This example shows how easy it is to roll your own filters for displaying data.  As explained in
+the "Writing your own Filters" section of the {@link angular.filter angular.filter} page, you
+simply add your filter function on to the `angular.filter` object.  
+
+In this example, our filter name is "checkmark"; our input is either "true" or "false", and we
+return one of two unicode characters we have chosen to represent true or false (`\u2713` and
+`\u2718`).  
+
+<table id="tutorial_nav">
+<tr>
+<td id="previous_step">{@link tutorial.step_8 Previous}</td>
+<td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-9/app Example}</td>
+<td id="tut_home">{@link tutorial Tutorial Home}</td>
+<td id="code_diff">{@link
+https://github.com/angular/angular-phonecat/commit/975d173ad0768487852387497c086f3c93fb48f6 Code
+Diff}</td>
+<td id="next_step">{@link tutorial.step_10 Next}</td>
+</tr>
+</table>
-- 
cgit v1.2.3