knowhow-server
Version:
A personal workflow engine that can manage and use any network connected host
108 lines (100 loc) • 5.17 kB
HTML
<a href="http://github.com/angular/angular.js/edit/master/docs/content/tutorial/step_09.ngdoc" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable=""></code>
<div><span class="hint"></span>
</div>
</h1>
<div><div class="tutorial-page tutorial-9-filters-page"><ul doc-tutorial-nav="9"></ul>
<p>In this step you will learn how to create your own custom display filter.</p>
<div doc-tutorial-reset="9">
</div>
<p>Navigate to one of the detail pages.</p>
<p>In the previous step, the details page displayed either "true" or "false" to indicate whether
certain phone features were present or not. We have used a custom filter to convert those text
strings into glyphs: ✓ for "true", and ✘ for "false". Let's see what the filter code looks like.</p>
<p>The most important changes are listed below. You can see the full diff on <a href="https://github.com/angular/angular-phonecat/compare/step-8...step-9">GitHub</a>:</p>
<h3 id="custom-filter">Custom Filter</h3>
<p>In order to create a new filter, you are going to create a <code>phonecatFilters</code> module and register
your custom filter with this module:</p>
<p><strong><code>app/js/filters.js</code>:</strong>
<pre class="prettyprint linenums">
angular.module('phonecatFilters', []).filter('checkmark', function() {
return function(input) {
return input ? '\u2713' : '\u2718';
};
});
</pre>
<p>The name of our filter is "checkmark". The <code>input</code> evaluates to either <code>true</code> or <code>false</code>, and we
return one of the two unicode characters we have chosen to represent true (<code>\u2713</code> -> ✓) or false (<code>\u2718</code> -> ✘).</p>
<p>Now that our filter is ready, we need to register the <code>phonecatFilters</code> module as a dependency for
our main <code>phonecat</code> module.</p>
<p><strong><code>app/js/app.js</code>:</strong>
<pre class="prettyprint linenums">
...
angular.module('phonecatApp', ['phonecatFilters']).
...
</pre>
<h3 id="template">Template</h3>
<p>Since the filter code lives in the <code>app/js/filters.js</code> file, we need to include this file in our
layout template.</p>
<p><strong><code>app/index.html</code>:</strong>
<pre class="prettyprint linenums">
...
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
...
</pre>
<p>The syntax for using filters in Angular templates is as follows:</p>
<pre><code>{{ expression | filter }}</code></pre>
<p>Let's employ the filter in the phone details template:</p>
<p><strong><code>app/partials/phone-detail.html</code>:</strong>
<pre class="prettyprint linenums">
...
<dl>
<dt>Infrared</dt>
<dd>{{phone.connectivity.infrared | checkmark}}</dd>
<dt>GPS</dt>
<dd>{{phone.connectivity.gps | checkmark}}</dd>
</dl>
...
</pre>
<h3 id="test">Test</h3>
<p>Filters, like any other component, should be tested and these tests are very easy to write.</p>
<p><strong><code>test/unit/filtersSpec.js</code>:</strong>
<pre class="prettyprint linenums">
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');
}));
});
});
</pre>
<p>We must call <code>beforeEach(module('phonecatFilters'))</code> before any of
our filter tests execute. This call loads our <code>phonecatFilters</code> module into the injector
for this test run.</p>
<p>Note that we call the helper function, <code>inject(function(checkmarkFilter) { ... })</code>, to get
access to the filter that we want to test. See <a href="api/angular.mock.inject"><code>angular.mock.inject()</code></a>.</p>
<p>You should now see the following output in the Karma tab:</p>
<pre><code> Chrome 22.0: Executed 4 of 4 SUCCESS (0.034 secs / 0.012 secs)</code></pre>
<h2 id="experiments">Experiments</h2>
<ul>
<li><p>Let's experiment with some of the <a href="api/ng.$filterProvider"><code>built-in Angular filters</code></a> and add the
following bindings to <code>index.html</code>:</p>
<ul>
<li><code>{{ "lower cap string" | uppercase }}</code></li>
<li><code>{{ {foo: "bar", baz: 23} | json }}</code></li>
<li><code>{{ 1304375948024 | date }}</code></li>
<li><code>{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}</code></li>
</ul>
</li>
<li><p>We can also create a model with an input element, and combine it with a filtered binding. Add
the following to index.html:</p>
<pre><code> <input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}</code></pre>
</li>
</ul>
<h2 id="summary">Summary</h2>
<p>Now that you have learned how to write and test a custom filter, go to <a href="tutorial/step_10">step 10</a> to
learn how we can use Angular to enhance the phone details page further.</p>
<ul doc-tutorial-nav="9"></ul></div></div>