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
<!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>{{ myText | uppercase }}</p>
<p>{{ myNumber | currency }}</p>
<p>{{ myDate | date:’fullDate’ }}</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 :
HELLO INDIA
$1,234.56
Thursday, April 11, 2024
0 Comments