Filters in AngularJS are used to format the data displayed to the user. They can be used in view templates, controllers, or services to modify data before presenting it. Filters are useful for formatting dates, numbers, currencies, converting text to uppercase/lowercase, and more.
Using Filters
In Templates: Filters can be applied directly in the HTML templates using the pipe (|) character.
Syntax: {{ expression | filterName:parameter1:parameter2 }}
Example: {{ name | uppercase }}
In Controllers: Filters can be injected into controllers and used within JavaScript code.
app.controller('myCtrl', function($scope, $filter) {
$scope.name = 'angularjs';
$scope.uppercaseName = $filter('uppercase')($scope.name);
});
Built-in Filters
AngularJS provides several built-in filters:
currency: Formats a number as a currency (default is USD).
- Example:
{{ amount | currency:'EUR' }}
date: Formats a date to a specified format.
- Example:
{{ today | date:'fullDate' }}
filter: Selects a subset of items from an array based on criteria.
- Example:
{{ users | filter:{name:'John'} }}
json: Formats an object as a JSON string.
- Example:
{{ user | json }}
limitTo: Limits an array or string to a specified number of elements or characters.
- Example:
{{ message | limitTo:10 }}
lowercase: Converts a string to lowercase.
- Example:
{{ name | lowercase }}
number: Formats a number to a specified number of decimal places.
- Example:
{{ pi | number:2 }}
orderBy: Orders an array by an expression.
- Example:
{{ users | orderBy:'name' }}
uppercase: Converts a string to uppercase.
- Example:
{{ name | uppercase }}
Custom Filters
You can also create custom filters to perform specific formatting tasks.
Creating a Custom Filter:
app.filter('reverse', function() {
return function(input) {
if (!input) return '';
return input.split('').reverse().join('');
};
});
Using the Custom Filter:
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ 'AngularJS' | reverse }}</p>
</div>
Example of filters.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
// Define the module
var app = angular.module('myApp', []);
// Define the controller
app.controller('myCtrl', function($scope) {
$scope.amount = 1234.56;
$scope.today = new Date();
$scope.name = 'angularjs';
$scope.users = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Jim', age: 35 }
];
});
// Define a custom filter
app.filter('reverse', function() {
return function(input) {
if (!input) return '';
return input.split('').reverse().join('');
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h2>Built-in Filters</h2>
<p>Currency: {{ amount | currency }}</p>
<p>Date: {{ today | date:'fullDate' }}</p>
<p>Uppercase: {{ name | uppercase }}</p>
<p>Filtered Users: {{ users | filter:{name:'John'} | json }}</p>
<p>Limited Text: {{ name | limitTo:4 }}</p>
<h2>Custom Filter</h2>
<p>Reversed: {{ name | reverse }}</p>
</div>
</body>
</html>
Leave Comment