Table of Contents
hide
Introduction of Filters in AJS
- Filters in AJS enable us to apply common formatting tasks with minimal effort, improving code readability and maintainability.
Definition of Filters in AJS
- Angular filters are a powerful feature that allows us to format and manipulate data displayed in our Angular application.
- Filters provide a convenient way to transform data before it is presented to the user, whether it’s formatting text, numbers, dates, or even custom data structures.
- In Angular JS, filters are used to format the data displayed to the user.
Features of Filters in AJS
- Filters can be applied in various parts of expressions of the Angular application, such as templates, controllers, or services.
- Syntax:
They can be applied in templates using the :
{{ expression | filter:options }}Here,
Filter Expression: This is the value to be filtered.
Pipe (|): This symbol is used to apply a filter to the expression.
Filter Name: This specifies which filter to use.
Options: These are optional parameters that can be passed to the filter.
- Filters are typically used for formatting data, such as currency, dates, numbers, or even custom formats.
Built-in-Filters
- AngularJS provides several built-in filters for common tasks like formatting numbers, dates, and currency, as well as filtering arrays and objects.
- Some commonly used built-in filters are as follows:-
currency: Formats a number as a currency.date: Formats a date.filter: Filters an array based on specified criteria.json: Formats an object as a JSON string.limitTo: Limits an array/string to a specified number of elements/characters.lowercase: Converts a string to lowercase.uppercase: Converts a string to uppercase.orderBy: Orders an array by a specified property.number: Formats a number as text.
- Custom Filters :
- we can also create custom filters by using them with our AngularJS module using the
filter()method. - Custom filters can be useful for implementing specific formatting or data manipulation logic tailored to your application’s needs.
- Syntax :
- we can also create custom filters by using them with our AngularJS module using the
angular.module(‘myApp’)
.filter(‘customFilter’, function()
.filter(‘customFilter’, function()
{
return function(input)
return function(input)
{
// Write some required processingoutput codes here
return processedOutput;
};
});
// Write some required processingoutput codes here
return processedOutput;
};
});
To use the above-created custom filter in the HTML file:
<p>{{ someData | customFilter }}</p>
Examples of Filters in AJS
Example : An AJS program example to display common Filters.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Angular Filters Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<p>My Country is = {{ myText | uppercase }}</p>
<p>-----------------------------------------------------</p>
<p>Currency Value in Dollar is = {{ myNumber | currency }}</p>
<p>-----------------------------------------------------</p>
<p>The Current Full Date is = {{ myDate | date:'fullDate' }}</p>
<p>The Current Long Date is = {{ myDate | date:'longDate' }}</p>
<p>The Current Short Date is = {{ myDate | date:'shortDate' }}</p>
<p>The Current Medium Date is = {{ myDate | date:'mediumDate' }}</p>
<p>-----------------------------------------------------</p>
<p>The Full Name of Day is = {{ myDate | date:'EEEE' }}</p>
<p>The Short Name of Day is = {{ myDate | date:'EEE' }}</p>
<p>-----------------------------------------------------</p>
<p>The Current Date is = {{ myDate | date:'dd' }}</p>
<p>The Current Date is = {{ myDate | date:'d' }}</p>
<p>-----------------------------------------------------</p>
<p>The Week of the Year is = {{ myDate | date:'ww' }}</p>
<p>The Current Month is = {{ myDate | date:'LLLL' }}</p>
<p>The Current Date is = {{ myDate | date:'MMM-dd' }}</p>
<p>The Current Date is = {{ myDate | date:'yyyy-MMM-dd' }}</p>
<p>The Current Date is = {{ myDate | date:'dd-MMM-yyyy' }}</p>
<p>The Current Date is = {{ myDate | date:'dd-MMMM-yyyy' }}</p>
<p>The Current Date is = {{ myDate | date:'d-M-yyyy' }}</p>
<p>The Current Date is = {{ myDate | date:'dd/MM/yyyy' }}</p>
<p>The Current Date is = {{ myDate | date:'dd-MMM-yy' }}</p>
<p>The Current Day and Date is = {{ myDate | date:'EEEE dd-MMM-yyyy' }}</p>
<p>The Current Day,Date and Time is = {{ myDate | date:'EEEE dd-MMM-yyyy h:mm:ss a' }}</p>
<p>-----------------------------------------------------</p>
<p>The Current Time is = {{ myDate | date:'HH:mm:ss' }}</p>
<p>The Current Time is = {{ myDate | date:'h:mm a' }}</p>
<p>The Current Time is = {{ myDate | date:'h:mm:ss a' }}</p>
<p>The Current Time is = {{ myDate | date:'h:mm:ss:sss a' }}</p>
<p>The Current Time with Time Zone is = {{ myDate | date:'h:mm:ss:sss a Z' }}</p>
<p>-----------------------------------------------------</p>
<p>The Current Date and Time is = {{ myDate | date:"MM/dd/yyyy 'at' h:mm a" }}</p>
<p>The Current Date and Time is = {{ myDate | date:"MM/dd/yyyy @ h:mm a" }}</p>
</div>
<script>
angular.module('myApp', []).controller('MyController', function($scope)
{
$scope.myText = 'hello india';
$scope.myNumber = 1234.56;
$scope.myDate = new Date();
});
</script>
</body>
</html>
Output:
My Country is = HELLO INDIA
-----------------------------------------------------
Currency Value in Dollar is = $1,234.56
-----------------------------------------------------
The Current Full Date is = Friday, May 3, 2024
The Current Long Date is = May 3, 2024
The Current Short Date is = 5/3/24
The Current Medium Date is = May 3, 2024
-----------------------------------------------------
The Full Name of Day is = Friday
The Short Name of Day is = Fri
-----------------------------------------------------
The Current Date is = 03
The Current Date is = 3
-----------------------------------------------------
The Week of the Year is = 18
The Current Month is = May
The Current Date is = May-03
The Current Date is = 2024-May-03
The Current Date is = 03-May-2024
The Current Date is = 03-May-2024
The Current Date is = 3-5-2024
The Current Date is = 03/05/2024
The Current Date is = 03-May-24
The Current Day and Date is = Friday 03-May-2024
The Current Day,Date and Time is = Friday 03-May-2024 10:37:01 PM
-----------------------------------------------------
The Current Time is = 22:37:01
The Current Time is = 10:37 PM
The Current Time is = 10:37:01 PM
The Current Time is = 10:37:01:492 PM
The Current Time with Time Zone is = 10:37:01:492 PM +0530
-----------------------------------------------------
The Current Date and Time is = 05/03/2024 at 10:37 PM
The Current Date and Time is = 05/03/2024 @ 10:37 PMExample : An AJS program example to Display Uppercase Filters.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="app1" ng-controller="controller1">
<p>The Country Name is = {{ countryName | uppercase }}</p>
<p>The State Name is = {{ stateName | uppercase }}</p>
<p>The City Name is = {{ cityName | uppercase }}</p>
<p>The Complete Address is = {{ countryName | uppercase }}, {{ stateName | uppercase }}, {{ cityName | uppercase }} </p>
</div>
<script>
angular.module('app1', []).controller('controller1', function($scope)
{
$scope.countryName = "India",
$scope.stateName = "Bihar",
$scope.cityName = "Patna"
});
</script>
</body>
</html>
Output:
The Country Name is = INDIA
The State Name is = BIHAR
The City Name is = PATNA
The Complete Address is = INDIA, BIHAR, PATNAExample : An AJS program example to Display OrderBy Filters for Array data.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="app1" ng-controller="controller1">
<table border="1" width="50%">
<tr>
<th ng-click="orderByAsc('sname')">Click to Arrange By Name</th>
<th ng-click="orderByAsc('cname')">Click to Arrange By Country</th>
</tr>
<tr ng-repeat="x in address | orderBy:OrderedList">
<td>{{x.sname}}</td>
<td>{{x.cname}}</td>
</tr>
</table>
</div>
<script>
angular.module('app1', []).controller('controller1', function($scope)
{
$scope.address = [
{sname:'B',cname:'Mumbai'},
{sname:'D',cname:'Benglure'},
{sname:'A',cname:'Pune'},
{sname:'C',cname:'Hyderabad'},
{sname:'M',cname:'New Delhi'},
{sname:'K',cname:'Kolkata'},
{sname:'N',cname:'Ahemdabad'},
{sname:'D',cname:'Mumbai'},
{sname:'B',cname:'Pune'}
];
$scope.orderByAsc = function(x)
{
$scope.OrderedList = x;
}
});
</script>
</body>
</html>
Output:
Click to Arrange By Name Click to Arrange By Country
B Mumbai
D Benglure
A Pune
C Hyderabad
M New Delhi
K Kolkata
N Ahemdabad
D Mumbai
B Pune 
0 Comments