Filters can be used with binding expression or a directive using PIPE | symbol for formatting of data.
{{ <expression> | <filterName>:<parameter> }}
Filter types
- lowercase
- uppercase
- number
- currency
- date
Example Date patterns (Sample data 09/03/2017)
yyyy : 2017
yy : 17
MMMM : March
MMM : Mar
MM : 03
M : 3
dd : 09
d : 9
EXAMPLE
JS
var app = angular.module('module1', []);
app.controller("myController", function ($scope) {
var employees = [
{ name : "Shaan", dob : new Date("May 12, 1980"),
gender : "Male", salary : 25000 },
{ name : "Renu", dob : new Date("October 08, 1985"),
gender : "Female", salary : 47000 },
{ name : "Rahul", dob : new Date("January 27, 1988"),
gender : "Male", salary : 35000 },
{ name : "Anju", dob : new Date("August 15, 1947"),
gender : "Female", salary : 18000 }
]
$scope.employees = employees; });
HTML
<body ng-app="module1">
<div ng-controller="myController">
<table>
<thead>
<tr> <th>Name</th> <th>DOB</th> <th>Gender</th>
<th>Salary Num</th> <th>Salary Curr</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td> {{ employee.name | uppercase }} </td>
<td> {{ employee.dob | date:"dd/MM/yyyy" }} </td>
<td> {{ employee.gender | lowercase }} </td>
<td> {{ employee.salary | number:2 }} </td>
<td> {{ employee.salary | currency:"INR ":1 }} </td>
</tr>
</tbody>
</table>
</div>
OUTPUT
Name | DOB | Gender | Salary Num | Salary Curr
Shaan | 12/05/1980 | male | 25,000.00 | INR 25,000.0
Renu | 08/10/1985 | female | 47,000.00 | INR 47,000.0
Rahul | 27/01/1988 | male | 35,000.00 | INR 35,000.0
Anju | 15/08/1947 | female | 18,000.00 | INR 18,000.0
No comments:
Post a Comment
Note: only a member of this blog may post a comment.