1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
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>
|
