Filters

Filters format the value of an expression for display. They are applied using the pipe symbol |.

Built-in Filters

<!-- currency -->
<p>{{ 9.99 | currency }}</p>          <!-- $9.99 -->
<p>{{ 9.99 | currency:'£' }}</p>     <!-- £9.99 -->

<!-- uppercase / lowercase -->
<p>{{ "hello" | uppercase }}</p>      <!-- HELLO -->
<p>{{ "HELLO" | lowercase }}</p>      <!-- hello -->

<!-- number -->
<p>{{ 3.14159 | number:2 }}</p>      <!-- 3.14 -->

<!-- date -->
<p>{{ today | date:'dd/MM/yyyy' }}</p>
<p>{{ today | date:'fullDate' }}</p>

<!-- json (for debugging) -->
<pre>{{ user | json }}</pre>

<!-- limitTo -->
<p>{{ "Hello World" | limitTo:5 }}</p> <!-- Hello -->

Filter in ng-repeat

<input ng-model="searchText" placeholder="Search...">

<ul>
    <li ng-repeat="user in users | filter:searchText | orderBy:'name'">
        {{ user.name }} ({{ user.age }})
    </li>
</ul>

orderBy Filter

<!-- Sort ascending by name -->
<li ng-repeat="user in users | orderBy:'name'">

<!-- Sort descending -->
<li ng-repeat="user in users | orderBy:'-age'">

Custom Filters

app.filter('reverse', function() {
    return function(input) {
        return input.split('').reverse().join('');
    };
});

// Usage:
// {{ "Hello" | reverse }}  → "olleH"

Chaining Filters

<p>{{ message | uppercase | limitTo:10 }}</p>