WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Filters


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


AngularJS filter

AngularJS filters can be used to transform data:

filter description
currency Format numbers as currency.
filter Select a subset from the array items.
lowercase The formatted string is lowercase.
orderBy Arrange the array based on an expression.
uppercase The formatted string is uppercase.

Add filter to expression

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

(The following two examples, we will use the person controller mentioned in the previous chapter)

uppercase The filter formats the string as uppercase:

Example

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

</div>
Try it Yourself »

The lowercase filter formats the string to lowercase:

Example

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>
Try it Yourself »

Adding Filters to Directives

Filters are added to mandates, as ng-repeat, by utilizing the pipe character |, trailed by a filter:

Example

The orderBy channel sorts an array:

<div ng-app="myApp" ng-controller="namesCtrl">

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

</div>
Try it Yourself »

The currency Filter

The currency channel organizes a number as currency:

Example

<div ng-app="myApp" ng-controller="costCtrl">

<h1>Price: {{ cost | currency }}</h1>

</div>
Try it Yourself »

Read increasingly about the currency channel in our AngularJS money Filter Reference


The channel Filter

The filter channel chooses a subset of an array.

The filter channel must be utilized on exhibits, and it restores an cluster containing just the coordinating items.

Example

Return the names that contains the letter "i":

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | channel : 'i'">
    {{ x }}
  </li>
</ul>

</div>
Try it Yourself »

Read progressively about the channel in our AngularJS channel Filter Reference


Filter an Array Based on User Input

By setting the ng-model mandate on an information field, we can utilize the estimation of the info field as an articulation in a channel.

Type a letter in the information field, and the rundown will recoil/develop contingent upon the match:

  • {{ x }}

Example

<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | channel : test">
    {{ x }}
  </li>
</ul>

</div>
Try it Yourself »

Sort an Array Based on User Input

Click the table headers to change the sort order::

Name Country
{{x.name}} {{x.country}}

By including the ng-click mandate on the table headers, we can run a capacity that changes the arranging request of the array:

Example

<div ng-app="myApp" ng-controller="namesCtrl">

<table border="1" width="100%">
  <tr>
    <th ng-click="orderByMe('name')">Name</th>
    <th ng-click="orderByMe('country')">Country</th>
  </tr>
  <tr ng-repeat="x in names | orderBy:myOrderBy">
    <td>{{x.name}}</td>
    <td>{{x.country}}</td>
  </tr>
</table>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Carl',country:'Sweden'},
    {name:'Margareth',country:'England'},
    {name:'Hege',country:'Norway'},
    {name:'Joe',country:'Denmark'},
    {name:'Gustav',country:'Sweden'},
    {name:'Birgit',country:'Denmark'},
    {name:'Mary',country:'England'},
    {name:'Kai',country:'Norway'}
  ];
  $scope.orderByMe = function(x) {
    $scope.myOrderBy = x;
  }
});
</script>
Try it Yourself »

Custom Filters

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

Example

Make a custom channel called "myFormat":

<ul ng-app="myApp" ng-controller="namesCtrl">
    <li ng-repeat="x in names">
        {{x | myFormat}}
    </li>
</ul>

<script>
var application = angular.module('myApp', []);
app.filter('myFormat', format() {
    return function(x) {
        var I, c, txt = "";
        x = x.split("")
        for (I = 0; I < x.length; i++) {
            c = x[i];
            on the off chance that (I % 2 == 0) {
                c = c.toUpperCase();
            }
            txt += c;
        }
        return txt;
    };
});
app.controller('namesCtrl', function($scope) {
    $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>
Try it Yourself »

The myFormat channel will organize each other character to uppercase.