×

Html & Html5

The World's best Software Development Study Portal

AngularJS Filters


AngularJS Filters allow us to format the data to display on UI without changing original format.

Filters can be used with an expression or directives using pipe | sign.

{{expression | filterName:parameter }}

Angular includes various filters to format data of different data types. The following table lists important filters.




Filter Name Description
Number Formats a numeric data as text with comma and fraction.
Currency Formats numeric data into specified currency format and fraction.
Date Formats date to string in specified format.
Uppercase Converts string to upper case.
Lowercase Converts string to lower case.
Filter Filters an array based on specified criteria and returns new array.
orderBy Sorts an array based on specified predicate expression.
Json Converts JavaScript object into JSON string
limitTo Returns new array containing specified number of elements from an existing array.


Number Filter

AngularJS number filter is used to convert a number into string or text. We can also define a limit to display a number of decimal digits. Number filter rounds off the number to specified decimal digits.

Example
Display the weight with 3 decimals:
<div ng-app="myApp" ng-controller="nCtrl">

<h1>{{weight | number : 3}} kg</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('nCtrl', function($scope) {
    $scope.weight = 9999;
});
</script>



Currency filter

One of the filters in AngularJS is called the Currency Filter. This “currency” filter includes the “$” Dollar Symbol as default. So, we can use the following code for the HTML template format of Currency Filter. AngularJS currency filter is used to convert a number into a currency format.

Example
Display the number as a currency format:
<div ng-app="myApp" ng-controller="costCtrl">

<p>Price = {{ price | currency }}</p>

</div>



Date Filter

AngularJS date filter is used to convert a date into a specified format. When the date format is not specified, the default date format is 'MMM d, yyyy'. Parameter Values: The date filter contains format and timezone parameters which is optional.

Example
Display the number as a date format:
<div ng-app="myApp" ng-controller="datCtrl">

<p>Date = {{ today | date }}</p>

</div>



Uppercase Filter

uppercase() Function in AngularJS is used to convert the string into uppercase. It can be used when user wants to show the text in uppercase instead of lowercase.

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

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

</div>



Lowercase Filter

This filter takes on a string output and formats the string and displays all the characters in the string as lowercase. In angularjs, lowercase filter is used to convert string to lowercase. If we want to convert displaying text or string to lowercase in angularjs application we can achieve this by using lowercase filter.

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

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

</div>



Filter Filter

The “filter” Filter in AngularJS is used to filter the array and object elements and return the filtered items. In other words, this filter selects a subset (a smaller array containing elements that meet the filter criteria) of an array from the original array.

Example
Return the names that contains the letter "i":
<div ng-app="myApp" ng-controller="namesCtrl">

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

</div>



OrderBy Filter

The orderBy filter facilitates you to sort an array. By default, it sorts strings in alphabetical order and numbers in numerical order.

Example
Display the items alphabetically:
<div ng-app="myApp" ng-controller="orderCtrl">

<ul>
<li ng-repeat="x in cars | orderBy">{{x}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
    $scope.cars = ["Dodge", "Fiat", "Audi", "Volvo", "BMW", "Ford"];
});
</script>



JSON Filter

Allows you to convert a JavaScript object into JSON string. This filter is mostly useful for debugging. When using the double curly notation the binding is automatically converted to JSON.

Example
Display a JavaScript object as a JSON string:
<div ng-app="myApp" ng-controller="jsCtrl">

<h1>Customer:</h1>

<pre>{{customer | json}}</pre>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('jsCtrl', function($scope) {
    $scope.customer = {
        "name" : "Alfreds Futterkiste",
        "city" : "Berlin",
        "country" : "Germany"
    };
});
</script>



Limit To Filter

The limitTo filter in AngularJS is used to returns an array or a string which contains a specified number of elements. This filter can be used with arrays, strings, and numbers. The basic principle, however, remains the same in all the three cases.

Keypoints:
1.For arrays, it returns an array containing only the specified number of items.
2.When used for strings, it returns another string containing the specified number of characters.
3.In the case of numbers, it returns a string containing only the specified number of digits.
4.Negative numbers are used to return elements starting from the end of the element, instead of the beginning.

Example
Display only the first three items of an array:
<div ng-app="myApp" ng-controller="sizeCtrl">

<ul>
<li ng-repeat="x in cars | limitTo : 3">{{x}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
    $scope.cars = ["Audi", "BMW", "Dodge", "Fiat", "Ford", "Volvo"];
});
</script>