Filters is used to format and transform data. Filters can be added to expressions by using the pipe character | followed by a filter name.
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Your Name is: {{ firstName + " " + lastName | uppercase }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Mark";
$scope.lastName = "Zuckerberg";
});
</script>
</body>
Same way you can use lowercase filter format strings.
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
The currency filter formats a number as currency.
<div ng-app="myApp" ng-controller="curCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('curCtrl', function($scope) {
$scope.price = 25;
});
</script>
<h1>Price: {{ price | currency : "Rs " }}</h1>
<h1>Price: {{ price | currency : "Rs " : 3 }}</h1>
The date filter formats a date to a specified format.
Syntax: {{ datevariable | date : format : timezone }}
<body>
<div ng-app="myApp" ng-controller="dateCtrl">
<p>Date = {{ today | date }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('dateCtrl', function($scope) {
$scope.today = new Date();
});
</script>
| Format | Description |
|---|---|
| "yyyy" or "y" | year (2017) |
| "yy" | year (17) |
| "MMMM" | month (January) |
| "MMM" | month (Jan) |
| "MM" | month (01) |
| "M" | month (1) |
| "dd" | day (06) |
| "d" | day (6) |
| "EEEE" | day (Monday) |
| "EEE" | day (Mon) |
| "HH" | hour, 00-23 (05) |
| "H" | hour 0-23 (5) |
| "hh" | 12 hour format with AM/PM |
| "h" | hour in AM/PM, 0-12 (9) |
| "mm" or "m" | minute (05) |
| "ss" or "s" | second (05) |
| "sss" | millisecond (035) |
| "a" | (AM/PM) |
| "Z" | timezone (from -1200 to +1200) |
| "ww" or "w" | week (00-53) |
|
The format value can be one of the following predefined formats: "short" same as "M/d/yy h:mm a" (1/5/16 9:05 AM) "medium" same as "MMM d, y h:mm:ss a" (Jan 5, 2016 9:05:05 AM) "shortDate" same as "M/d/yy" (1/5/16) "mediumDate" same as "MMM d, y" (Jan 5, 2016) "longDate" same as "MMMM d, y" (January 5, 2016) "fullDate" same as "EEEE, MMMM d, y" (Tuesday, January 5, 2016) "shortTime" same as "h:mm a" (9:05 AM) "mediumTime" same as "h:mm:ss a" (9:05:05 AM) |
|
Date = {{ today | date : "dd.MM.y" }}
Date = {{ today | date : "fullDate" }}
Date = {{ today | date : "'today is ' MMMM d, y" }}
Date = {{ "2016-01-05T09:05:05.035Z" | date }}
Sorts an array using angularjs orderby filter.
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Looping with objects:</p>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr ng-repeat="x in names | orderBy:'age'">
<td>{{ x.name }}</td> <td>{{ x.age }}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Raj',age:20},
{name:'John',age:26},
{name:'Amit',age:24},
{name:'Rahul',age:25},
{name:'Priya',age:21},
{name:'Anjali',age:23},
{name:'Seema',age:22},
];
});
</script>
</body>
Click the table headers to change the sorting order:
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1" >
<tr>
<th ng-click="orderByFun('name')">Name</th>
<th ng-click="orderByFun('age')">Age</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.age}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.names = [
{name:'Raj',age:20},
{name:'John',age:26},
{name:'Amit',age:24},
{name:'Rahul',age:25},
{name:'Priya',age:21},
{name:'Anjali',age:23},
{name:'Seema',age:22},
];
$scope.orderByFun = function(y) {
$scope.myOrderBy = y;
}
});
</script>
The letter filter display records based on any letter containing in the array items.
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names | filter : 'a'">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.names = [
'Raj',
'John',
'Amit',
'Rahul',
'Priya',
'Anjali',
'Seema'
];
});
</script>
</body>
Example: input letter Filter
By setting the ng-model directive on an input field, we can use the value of the input field as an expression in a filter.
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names | filter : 'a'">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.names = [
'Raj',
'John',
'Amit',
'Rahul',
'Priya',
'Anjali',
'Seema'
];
});
</script>
</body>
Example: The list only display names that contain letters entered in the input text field.
Note: The filter can only be used on arrays, and it returns an array containing only the matching items.