Filters in angular can do 3 different things
1. Format data
2. Sort data
3. Filter data
Filters can be used with a binding expression or a directive
To apply a filter use pipe (|) character
Syntax : {{ expression | filterName:parameter }}
Angular filters for formatting data
| Filter | Description |
| lowercase | Formats all characters to lowercase |
| uppercase | Formats all characters to uppercase |
| number | Formats a number as text. Includes comma as thousands separator and the number of decimal places can be specified |
| currency | Formats a number as a currency. $ is default. Custom currency and decimal places can be specified |
| date | Formats date to a string based on the requested format |
Angular Date formats
| Format | Result |
| yyyy | 4 digit year. Exampe 1998 |
| yy | 2 digit year. Example 1998 => 98 |
| MMMM | January - December |
| MMM | Jan - Dec |
| MM | 01 - 12 |
| M | 1 - 12 (No leading ZEROS) |
| dd | 01 - 31 |
| d | 1 - 31 (No leading ZEROS) |
Angular date format documentation
https://docs.angularjs.org/api/ng/filter/date
limitTo filter : Can be used to limit the number of rows or characters in a string.
Syntax : {{ expression | limitTo : limit : begin}}
The following example uses all the above filters
Script.js
var app = angular .module("myModule", []) .controller("myController", function ($scope) { var employees = [ { name: "Ben", dateOfBirth: new Date("November 23, 1980"), gender: "Male", salary: 55000.788 }, { name: "Sara", dateOfBirth: new Date("May 05, 1970"), gender: "Female", salary: 68000 }, { name: "Mark", dateOfBirth: new Date("August 15, 1974"), gender: "Male", salary: 57000 }, { name: "Pam", dateOfBirth: new Date("October 27, 1979"), gender: "Female", salary: 53000 }, { name: "Todd", dateOfBirth: new Date("December 30, 1983"), gender: "Male", salary: 60000 } ]; $scope.employees = employees; $scope.rowCount = 3; });
HtmlPage1.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/angular.min.js"></script> <script src="Scripts/Script.js"></script> <link href="Styles.css" rel="stylesheet" /> </head> <body ng-app="myModule"> <div ng-controller="myController"> Rows to display : <input type="number" step="1" ng-model="rowCount" max="5" min="0" /> <br /><br /> <table> <thead> <tr> <th>Name</th> <th>Date of Birth</th> <th>Gender</th> <th>Salary (number filter)</th> <th>Salary (currency filter)</th> </tr> </thead> <tbody> <tr ng-repeat="employee in employees | limitTo:rowCount"> <td> {{ employee.name | uppercase }} </td> <td> {{ employee.dateOfBirth | date:"dd/MM/yyyy" }} </td> <td> {{ employee.gender }} </td> <td> {{ employee.salary | number:2 }} </td> <td> {{ employee.salary | currency : "£" : 1 }} </td> </tr> </tbody> </table> </div> </body> </html>
Styles.css
body { font-family: Arial; } table { border-collapse: collapse; } td { border: 1px solid black; padding: 5px; } th { border: 1px solid black; padding: 5px; text-align: left; }