AngularJS Filters
AngularJS filters format the value of an expression for display without changing the underlying data.
What Is a Filter?
A filter formats the value of an expression for display, using the pipe character | followed by the filter name. AngularJS ships with several built-in filters for common formatting tasks like casing, currency, dates, and sorting arrays.
Using the uppercase Filter
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ name | uppercase }}</p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.name = "John Doe";
});
</script>
</body>
</html>Filtering Numbers and Dates
currency and date Filters
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Price: {{ price | currency }}</p>
<p>Today: {{ today | date:"yyyy-MM-dd" }}</p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.price = 249.5;
$scope.today = new Date();
});
</script>
</body>
</html>Filtering and Ordering an Array
Filters can also be applied inside ng-repeat to sort or narrow down a list before it is rendered, using orderBy and filter.
orderBy in ng-repeat
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="people=[{firstName:'John', lastName:'Doe'}, {firstName:'Ada', lastName:'Lovelace'}, {firstName:'Alan', lastName:'Turing'}]">
<ul>
<li ng-repeat="person in people | orderBy:'lastName'">
{{ person.firstName }} {{ person.lastName }}
</li>
</ul>
</div>
</body>
</html>Chaining Filters
Multiple filters can be chained together by adding another pipe. Each filter receives the output of the one before it.
Chaining Filters
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="name='John Doe'">
<p>{{ name | lowercase | uppercase }}</p>
</div>
</body>
</html>Note: Filters are read-only formatting tools — they never change the value stored on $scope, only what is displayed.
Exercise: AngularJS Filters
What is the main purpose of a filter in an expression?
