131 lines
4.5 KiB
HTML
Executable file
131 lines
4.5 KiB
HTML
Executable file
<h1><code ng:non-bindable=""></code>
|
|
<span class="hint"></span>
|
|
</h1>
|
|
<div><a href="http://github.com/angular/angular.js/edit/master/docs/content/tutorial/step_09.ngdoc" class="improve-docs btn btn-primary">Improve this doc</a><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>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 two unicode characters we have chosen to represent true or false (<code>\u2713</code> and
|
|
<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('phonecat', ['phonecatFilters']).
|
|
...
|
|
</pre>
|
|
|
|
<h3>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>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>Note that you need to configure our test injector with the <code>phonecatFilters</code> module before any of
|
|
our filter tests execute.</p>
|
|
|
|
<p>You should now see the following output in the Testacular tab:</p>
|
|
|
|
<pre><code> Chrome 22.0: Executed 4 of 4 SUCCESS (0.034 secs / 0.012 secs)
|
|
</code></pre>
|
|
|
|
<h2>Experiments</h2>
|
|
|
|
<ul>
|
|
<li><p>Let's experiment with some of the <a href="api/ng.$filter"><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>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>
|