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:

Filter	Description
uppercase	Returns the upper case of the string.
lowercase	Returns the lower case of the string
orderBy: ‘Field’	Orders an array by an expression. Should be used with ng-repeat only
currency	Converts a number to a currency format.
number : digitsAfterDecimal	Number rounded to decimalPlaces and places a “,” after each third digit
filter : model	Select a subset of items from an array as matted in the model.
date : format	Returns a date as per specified format
json : spaces	Allows you to convert a JavaScript object into JSON string.Default spacing is 2 spaces

Example to demonstrate all filters

 

Example to demonstrate all filters

http://www.w3.org/1999/xhtml">

















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’}}

Number formatting:

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

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;
}
})

or