mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-05-03 07:04:58 +08:00
docs - stripping extra new lines
This commit is contained in:
@@ -2,44 +2,31 @@
|
||||
@name Tutorial: 9 - Filters
|
||||
@description
|
||||
|
||||
|
||||
<ul doc:tutorial-nav="9"></ul>
|
||||
|
||||
|
||||
|
||||
|
||||
In this step you will learn how to create your own custom display filter.
|
||||
|
||||
|
||||
|
||||
|
||||
<doc:tutorial-instructions step="9"></doc:tutorial-instructions>
|
||||
|
||||
|
||||
|
||||
|
||||
Navigate to one of the detail pages.
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
The most important changes are listed below. You can see the full diff on {@link
|
||||
https://github.com/angular/angular-phonecat/compare/step-8...step-9
|
||||
GitHub}:
|
||||
|
||||
|
||||
|
||||
|
||||
## Custom Filter
|
||||
|
||||
|
||||
In order to create a new filter, simply register your custom filter function with the {@link
|
||||
api/angular.filter `angular.filter`} API.
|
||||
|
||||
|
||||
__`app/js/filters.js`:__
|
||||
<pre>
|
||||
angular.filter('checkmark', function(input) {
|
||||
@@ -47,21 +34,16 @@ angular.filter('checkmark', function(input) {
|
||||
});
|
||||
</pre>
|
||||
|
||||
|
||||
The name of our filter is "checkmark". The `input` evaluates to either `true` or `false`, and we
|
||||
return one of two unicode characters we have chosen to represent true or false (`\u2713` and
|
||||
`\u2718`).
|
||||
|
||||
|
||||
|
||||
|
||||
## Template
|
||||
|
||||
|
||||
Since the filter code lives in the `app/js/filters.js` file, we need to include this file in our
|
||||
layout template.
|
||||
|
||||
|
||||
__`app/index.html`:__
|
||||
<pre>
|
||||
...
|
||||
@@ -70,19 +52,14 @@ __`app/index.html`:__
|
||||
...
|
||||
</pre>
|
||||
|
||||
|
||||
The syntax for using filters in angular templates is as follows:
|
||||
|
||||
|
||||
{{ expression | filter }}
|
||||
|
||||
|
||||
Let's employ the filter in the phone details template:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
__`app/partials/phone-detail.html`:__
|
||||
<pre>
|
||||
...
|
||||
@@ -96,19 +73,14 @@ __`app/partials/phone-detail.html`:__
|
||||
</pre>
|
||||
|
||||
|
||||
|
||||
|
||||
## Test
|
||||
|
||||
|
||||
Filters, like any other component, should be tested and these tests are very easy to write.
|
||||
|
||||
|
||||
__`test/unit/filtersSpec.js`:__
|
||||
<pre>
|
||||
describe('checkmark filter', function() {
|
||||
|
||||
|
||||
it('should convert boolean values to unicode checkmark or cross', function() {
|
||||
expect(angular.filter.checkmark(true)).toBe('\u2713');
|
||||
expect(angular.filter.checkmark(false)).toBe('\u2718');
|
||||
|
||||
Reference in New Issue
Block a user