diff options
| author | Igor Minar | 2012-01-15 23:28:10 -0800 | 
|---|---|---|
| committer | Igor Minar | 2012-01-17 09:49:37 -0800 | 
| commit | 92af30ce6e99676c71c85bd08962b68629564908 (patch) | |
| tree | 4adf4b56cbf7c9fb6ee9dee8f40dd16fb2199842 /docs/content/tutorial/step_09.ngdoc | |
| parent | 54581d36df74ac128a078aafb3e4b66e0b1599f3 (diff) | |
| download | angular.js-92af30ce6e99676c71c85bd08962b68629564908.tar.bz2 | |
docs(*): various doc fixes
Diffstat (limited to 'docs/content/tutorial/step_09.ngdoc')
| -rw-r--r-- | docs/content/tutorial/step_09.ngdoc | 121 | 
1 files changed, 0 insertions, 121 deletions
| diff --git a/docs/content/tutorial/step_09.ngdoc b/docs/content/tutorial/step_09.ngdoc deleted file mode 100644 index c0df9e1f..00000000 --- a/docs/content/tutorial/step_09.ngdoc +++ /dev/null @@ -1,121 +0,0 @@ -@ngdoc overview -@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.module.ng.$filter `angular.module.ng.$filter`} API. - -__`app/js/filters.js`:__ -<pre> -angular.module.ng.$filter('checkmark', function(input) { -  return input ? '\u2713' : '\u2718'; -}); -</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> -... - <script src="js/controllers.js"></script> - <script src="js/filters.js"></script> -... -</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> -... -    <dl> -      <dt>Infrared</dt> -      <dd>{{phone.connectivity.infrared | checkmark}}</dd> -      <dt>GPS</dt> -      <dd>{{phone.connectivity.gps | checkmark}}</dd> -    </dl> -... -</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.module.ng.$filter.checkmark(true)).toBe('\u2713'); -    expect(angular.module.ng.$filter.checkmark(false)).toBe('\u2718'); -  }); -}) -</pre> - -To run the unit tests, execute the `./scripts/test.sh` script and you should see the following -output. - -        Chrome: Runner reset. -        .... -        Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms) -          Chrome 11.0.696.57 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms) - - -# Experiments - -* Let's experiment with some of the {@link api/angular.module.ng.$filter built-in angular filters} and add the -following bindings to `index.html`: -  * `{{ "lower cap string" | uppercase }}` -  * `{{ {foo: "bar", baz: 23} | json }}` -  * `{{ 1304375948024 | date }}` -  * `{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}` - -*  We can also create a model with an input element, and combine it with a filtered binding. Add -the following to index.html: - -        <input ng:model="userInput"> Uppercased: {{ userInput | uppercase }} - - -# Summary - -Now that you have learned how to write and test a custom filter, go to {@link step_10 step 10} to -learn how we can use angular to enhance the phone details page further. - - -<ul doc:tutorial-nav="9"></ul> | 
