Angular Filters

AngularJS Filters

---

Filters tin order the axe live added inward AngularJS to format data.

---

AngularJS Filters

AngularJS provides filters to transform data:

• currency Format a let on to a currency format.
• date Format a appointment to a specified format.
• filter Select a subset of items from an array.
• json Format an object to a JSON string.
• limitTo Limits an array/string, into a specified let on of elements/characters.
• lowercase Format a string to lower case.
• number Format a let on to a string.
• orderBy Orders an array past times an expression.
• uppercase Format a string to upper case.

---

Adding Filters to Expressions

Filters tin order the axe live added to expressions past times using the piping grapheme |, followed past times a filter.
The uppercase filter format strings to upper case:

Example

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

<p>The cite is {{ lastName | working capital alphabetic lineament }}</p>

</div>

The lowercase filter format strings to lower case:

Example

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

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

</div>

---

Adding Filters to Directives

Filters are added to directives, similar ng-repeat, past times using the piping grapheme |, followed past times a filter:

Example

The orderBy filter sorts an array:

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

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

</div>

---

The currency Filter

The currency filter formats a let on equally currency:

Example

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

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

</div>

Read to a greater extent than virtually the currency filter inward our AngularJS currency Filter Reference

---

The filter Filter

The filter filter selects a subset of an array.
The filter filter tin order the axe alone live used on arrays, together with it returns an array containing alone the matching items.

Example

Return the names that contains the alphabetic lineament "i":

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

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

</div>

Read to a greater extent than virtually the filter filter inward our AngularJS filter Filter Reference

---

Filter an Array Based on User Input

By setting the ng-model directive on an input field, nosotros tin order the axe work the value of the input champaign equally an facial expression inward a filter.
Type a alphabetic lineament inward the input field, together with the listing volition shrink/grow depending on the match:

• Jani
• Carl
• Margareth
• Hege
• Joe
• Gustav
• Birgit
• Mary
• Kai

Example

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

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

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

</div>

---

Sort an Array Based on User Input

Click the tabular array headers to alter the form order::

Name	Country
Jani	Norway
Carl	Sweden
Margareth	England
Hege	Norway
Joe	Denmark
Gustav	Sweden
Birgit	Denmark
Mary	England
Kai	Norway

By adding the ng-click directive on the tabular array headers, nosotros tin order the axe run a role that changes the sorting fellowship 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 inward 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>

---

Custom Filters

You tin order the axe brand your ain filters past times registering a novel filter manufactory role amongst your module:

Example

Make a custom filter called "myFormat":

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

<script>

var app = angular.module('myApp', []);
app.filter('myFormat', function() {
    return function(x) {
        var i, c, txt = "";
        for (i = 0; i < x.length; i++) {
            c = x[i];
            if (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>

The myFormat filter volition format every other grapheme to uppercase.

---