/app/public/js/libs/angular/docs/partials/guide/dev_guide.templates.filters.using_filters.html

 1<h1><code ng:non-bindable=""></code>
 2<span class="hint"></span>
 3</h1>
 4<div><p>Filters can be part of any <a href="api/ng.$rootScope.Scope"><code>api/ng.$rootScope.Scope</code></a> evaluation but are typically used to format
 5expressions in bindings in your templates:</p>
 6
 7<pre><code>    {{ expression | filter }}
 8</code></pre>
 9
10<p>Filters typically transform the data to a new data type, formatting the data in the process.
11Filters can also be chained, and can take optional arguments.</p>
12
13<p>You can chain filters using this syntax:</p>
14
15<pre><code>    {{ expression | filter1 | filter2 }}
16</code></pre>
17
18<p>You can also pass colon-delimited arguments to filters, for example, to display the number 123 with
192 decimal points:</p>
20
21<pre><code>    123 | number:2
22</code></pre>
23
24<p>Here are some examples that show values before and after applying different filters to an
25expression in a binding:</p>
26
27<ul>
28<li>No filter: <code>{{1234.5678}}</code> => <code>1234.5678</code></li>
29<li>Number filter: <code>{{1234.5678|number}}</code> => <code>1,234.57</code>. Notice the "," and rounding to two
30significant digits.</li>
31<li>Filter with arguments: <code>{{1234.5678|number:5}}</code> => <code>1,234.56780</code>. Filters can take optional
32arguments, separated by colons in a binding. For example, the "number" filter takes a number
33argument that specifies how many digits to display to the right of the decimal point.</li>
34</ul>
35
36<h3>Related Topics</h3>
37
38<ul>
39<li><a href="guide/dev_guide.templates.filters">Understanding Angular Filters</a></li>
40<li><a href="guide/dev_guide.templates.filters.creating_filters">Creating Angular Filters</a></li>
41</ul>
42
43<h3>Related API</h3>
44
45<ul>
46<li><a href="api/ng.$filter"><code>Angular Filter API</code></a></li>
47</ul></div>