AngularJS Filters

Filters can be added to expressions and directives using a pipe character (|).

AngularJS Filters

AngularJS filters are used to format data:

Adding Filters to Expressions

Filters can be added to expressions using a pipe character (|) and a filter.

(In the following two examples, we will use the person controller mentioned in previous sections)

The uppercase filter formats a string to uppercase:

AngularJS Example

<div ng-app="myApp" ng-controller="personCtrl">
<p>Name is {{ lastName | uppercase }}</p>
</div>

The lowercase filter formats a string to lowercase:

AngularJS Example

<div ng-app="myApp" ng-controller="personCtrl">
<p>Name is {{ lastName | lowercase }}</p></div>

currency Filter

The currency filter formats a number as currency:

AngularJS Example

<div ng-app="myApp" ng-controller="costCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>Total = {{ (quantity * price) | currency }}</p>
</div>

Adding Filters to Directives

Filters can be added to directives using a pipe character (|) and a filter.

The orderBy filter sorts an array by an expression:

AngularJS Example

<div ng-app="myApp" ng-controller="namesCtrl">
    <ul>
      <li ng-repeat="x in names | orderBy:'country'">
        {{ x.name + ', ' + x.country }}  </li></ul>
    </div>

Filter Input

Input filters can be added to directives using a pipe character (|) and a filter, followed by a colon and a model name.

The filter filter selects a subset from an array:

AngularJS Example

<div ng-app="myApp" ng-controller="namesCtrl">
    <p><input type="text" ng-model="test"></p>
    <ul>  &lt;li ng-repeat="x in names | 
filter:test | orderBy:'country'">    {{ (x.name | uppercase) + ', ' + x.country }}  </li></ul>
    </div>

Custom Filters

The following example customizes a filter reverse to reverse a string:

AngularJS Example

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "tutorialpro";
});
app.filter('reverse', function() { //can inject dependencies
    return function(text) {
        return text.split("").reverse().join("");
    }
});