Description
AngularJS Filters allows to change the data in applications. These can be included in the Expressions and Directives by using the pipe | character.
AngularJS filters can perform three operations, they are:
Generally, filters can transform the data into new datatype while processing. In this tutorial, AngularJS Filters tutorial, various types of filters and their syntax are discussed.
- Format data
- Sort data
- Filter data
Syntax
Filters are used with binding expression or a directive. The general syntax of filters is:
{{ expression | filter:itemFilter }}
When more than one filter is used in an expression, that filter is known as the Chaining Filter.
{{ expression | filter:itemFilter | filter:itemFilter }}
In above syntax, | filter: part tells the AngularJS to apply filter on expression data.
itemFilteris the name of filter function.
AngularJS has a set of built-in filter functions and are categorized into various types, such as:
| Filter | Description |
|---|---|
| currency | This filter converts a number to currency format. |
| lowercase | This filter formats all characters of a string to lowercase. |
| uppercase | This filter formats all the characters of a string to uppercase. |
| date | This filter formats the string to the requested format. |
| limitTo | This filter limits an array/string to required no. of elements/characters. |
| json | This filter formats an object to JSON string. |
| orderBy | Orders an array by an expression. |
Example
Converts the text into uppercase.
index.html
[html]
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="App.js"></script>
<script src="Controller.js"></script>
<title>AngularJS Filter:Uppercase</title>
</head>
<body ng-app="spApp">
<h1>AngularJS Filter:Uppercase</h1>
<div ng-controller="SPController">Name:
<input type="text" ng-model="name" />
<br />
<p>The name is {{ name | uppercase }}</p>
</div>
</body>
</html>
[/html]
Controller.js
[javascript]
var controller = MyApp.controller("SPController", function($scope) {
$scope.name="Mike Hussey"
});
[/javascript]
App.js
[javascript]
var MyApp = angular.module('spApp', []);
[/javascript]
Output:
Example
Converts the characters into lowercase.
index.html
[html]
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="App.js"></script>
<script src="Controller.js"></script>
<title>AngularJS Filter:Lowercase</title>
</head>
<body ng-app="spApp">
<h1>AngularJS Filter:Lowercase</h1>
<div ng-controller="SPController">Name:
<input type="text" ng-model="name" />
<br />
<p>The name is {{ name | lowercase }}</p>
</div>
</body>
</html>
[/html]
Controller.js
[javascript]
var controller = MyApp.controller("SPController", function($scope) {
$scope.name="GRAME SMITH"
});
[/javascript]
Output:
Description
Converts the text into currency format. Local currency format is used by default by this filter.
Syntax:
{{ number | currency : symbol : fractionsize }}
Example
index.html
[html]
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="App.js"></script>
<script src="Controller.js"></script>
<title>AngularJS Filter:Currencey</title>
</head>
<body ng-app="spApp">
<h1>AngularJS Filter:Currencey</h1>
<div ng-controller="SPController">
Quantity: <input type="number" ng-model="quantity" />
Price: <input type="number" ng-model="price" />
<p>Total = {{ (quantity * price) | currency }}</p>
</div>
</body>
</html>
[/html]
Controller.js
[javascript]
var controller = MyApp.controller("SPController", function($scope) {
$scope.quantity = 1;
$scope.price = 9.99;
});
[/javascript]
Output:
Description
Selects subset of items from an array. The filter filter allows applying filter only on arrays, and returns only the matched items in the form of arrays.
Syntax:
{{ arrayexpression | filter : expression : comparator }}
Example
[html]
<ul>
<li ng-repeat="user in users | filter:test ">
{{ (user.name | uppercase) + ', ' + user.age }}
</li>
</ul>
[/html]
Example
It arranges the array based on provided expression.
Example
index.html
[html]
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="App.js"></script>
<script src="Controller.js"></script>
<title>AngularJS Filter:Input Filter</title>
</head>
<body ng-app="spApp">
<h1>AngularJS Filter:Input Filter</h1>
<div ng-controller="SPController">
<p>Filtering input:</p>
<p>
<input type="text" ng-model="test" />
</p>
<ul>
<li ng-repeat="user in users | filter:test | orderBy:'age'">
{{ (user.name | uppercase) + ', ' + user.age }}
</li>
</ul>
</div>
</body>
</html>
[/html]
Controller.js
[javascript]
var controller = myApp.controller("SPController", function($scope) {
$scope.users = [
{name:'John',age:23},
{name:'James',age:24},
{name:'Jaffer',age:26},
];
});
[/javascript]
Output:
Key Points
- AngularJS Filter allows to change the data in applications.
- Filters are used with binding expression or a directive.
- Currency, filter, orderBy, uppercase, and lowecase are some filters of AngularJS.