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