angular filter tutorial and examples | Angular | ASP.NET Tutorials

For Consultation : +91 9887575540

Stay Connected :

Purpose of Filters

A filter formats the value of an expression for display to the user.


Filters can be added to expressions and directives using a pipe character. AngularJS filters can be used to transform data:

uppercaseReturns the upper case of the string.
lowercaseReturns the lower case of the string
orderBy: ‘Field’Orders an array by an expression. Should be used with ng-repeat only
currencyConverts a number to a currency format.
number : digitsAfterDecimalNumber rounded to decimalPlaces and places a “,” after each third digit
filter : modelSelect a subset of items from an array as matted in the model.
date : formatReturns a date as per specified format
json : spacesAllows you to convert a JavaScript object into JSON string.Default spacing is 2 spaces

Example to demonstrate all filters


Example to demonstrate all filters



Id Name Marks Fees Paid
{{stud.Id}} {{stud.Name | uppercase}} {{stud.Marks}} {{stud.FeesPaid | currency}}

angularjs Date Examples:

In controller:

$scope.GetDate = function(str) {

return new Date(str)


In Html Template:

Enter Date:

Medium Format: {{GetDate(SomeDate) | date: ‘medium’}}

yyyy-MM-dd HH:mm:ss Z

Format: {{GetDate(SomeDate) | date:’yyyy-MM-dd HH:mm:ss Z’}}
dd/MMM/yyyy @

h:mma Format: {{GetDate(SomeDate) | date:’dd/MMM/yyyy @ h:mma’}}

filters in angular 1

Number formatting:

Default formatting: {{SomeNumber | number}}
No fractions: {{SomeNumber | number: 0}}
Negative numbers: {{-SomeNumber | number: 4}}

angular date filter

angular JSON Filter: Allows you to convert a JavaScript object into JSON string Its mostly used for debugging:

{{ {'name':'value'} | json }}
 {{ {'name':'value'} | json:4 }}

angular custom filters

To write a custom filter we need to register a new filter factory function with the module.

This factory function should return a new filter function which takes the input value as the first argument. Any filter arguments are passed in as additional arguments to the filter function.

Note: filter names must be valid angular expression identifiers, such as uppercase or orderBy. Names with special characters, such as hyphens and dots, are not allowed.

Static Custom Filter:

The following sample filter reverses a text string. In addition, it conditionally makes the text upper-case

myApp.filter('reverse', function () {
return function (input, uppercase) { input = input || '';
var out = "";
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
// conditional based on optional argument
if (uppercase) {
out = out.toUpperCase();
return out;
Actual Value: {{SomeText}}
Reversed Value: {{SomeText | reverse}}
Reversed Uppercase Value: {{SomeText | reverse: true}}

angularjs ng-repeat filter

myApp.filter('Passed', function () {
return function (studs, passingMarks) {
if (typeof passingMarks == 'undefined') passingMarks = 35;
var filteredStuds = [];
for (var i = 0; i < studs.length; i++) {
if (studs[i].Marks > passingMarks) filteredStuds.push(studs[i]);
return filteredStuds;