We can apply Angular JS Filters on expressions and directives by using the pipe symbol ( | ) . Filters which are used with expression are
Uppercase : The uppercase filter converts string to the uppercase.
Lowercase : The lowercase filter convert string to the lowercase.
Currency : The currency filter formats a number value to currency format.
Lets see the examples of these three filters :
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController" >
My Name is : {{name | uppercase}}
My Name is : {{name | lowercase}}
Total Amount is : {{amount | currency}}
</div>
<script>
var app = angular.module("sampleApplication", []);
app.controller("sampleController", function($scope) {
$scope.name = "Thomas";
$scope.amount = "1500";
});
</script>
</body>
</html>
Uppercase filter apply to the {{ name }},it converts the name into the uppercase and same for the lowercase filter.Currency filter apply to the amount 1500 and the filter prefix $ sign to the amount and show the amount to the two decimal places. This is the default format of the currency filter. Lets understand more with an another example for currency filter.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController" >
Total Amount is : {{amount | currency : '$' : 3}}
</div>
<script>
var app = angular.module("sampleApplication", []);
app.controller("sampleController", function($scope) {
$scope.amount = "1500";
});
</script>
</body>
</html>
You can change this default currency format by just write colon after the currency and give sign in string format you want to show and then again colon and give the number value to show digits after the decimal. See the output in the green box.
Date filter used to change the format of date. Lets see some date formats with the help of an example.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController">
Today's Date is : {{todayDate}} <br />
Today's Date is : {{todayDate | date:'medium'}} <br />
Today's Date is : {{todayDate | date:'short'}} <br /><br />
Today's Date is : {{todayDate | date:'fullDate'}} <br />
Today's Date is : {{todayDate | date:'longDate'}} <br />
Today's Date is : {{todayDate | date:'mediumDate'}} <br />
Today's Date is : {{todayDate | date:'shortDate'}} <br /><br />
Today's Date is : {{todayDate | date:'dd-MM-yy'}} <br />
Today's Date is : {{todayDate | date:'dd-MM-yyyy'}} <br />
Today's Date is : {{todayDate | date:'dd-MMM-yyyy'}} <br /><br />
Today's Date is : {{todayDate | date:'dd/MM/yy'}} <br />
Today's Date is : {{todayDate | date:'dd/MM/yyyy'}} <br />
Today's Date is : {{todayDate | date:'dd/MMM/yyyy'}} <br />
</div>
<script>
var app = angular.module('sampleApplication', []);
app.controller('sampleController', function ($scope) {
$scope.todayDate = new Date();
});
</script>
</body>
</html>
Filter : It selects a subset of items from the collections based on the searched text and return a new array which contains searched items.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController">
<div class="container">
<div class="row">
<div class="col-md-12">
Search <input type="text" ng-model="searchEmployee" />
</div>
</div>
<table class="table table-striped ">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Phone Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees | filter:searchEmployee">
<td>{{emp.name}}</td>
<td>{{emp.age}}</td>
<td>{{emp.phoneNumber}}</td>
<td><button class="btn btn-primary btn-xs">Edit</button> <button class="btn btn-danger btn-xs">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var app = angular.module('sampleApplication', []);
app.controller('sampleController', function ($scope) {
$scope.employees = [{ name: "Kripke", age: "25", phoneNumber: "563544466" },
{ name: "Galtieri", age: "34", phoneNumber: "657865856" },
{ name: "Freud", age: "27", phoneNumber: "679423435" },
{ name: "Einstein", age: "25", phoneNumber: "343667789" },
{ name: "McClung", age: "44", phoneNumber: "456724423" },
{ name: "Milne", age: "35", phoneNumber: "789345564" },
{ name: "Morales", age: "26", phoneNumber: "243567333" },
{ name: "Roux", age: "50", phoneNumber: "879344666" }];
});
</script>
</body>
</html>
orderBy used to sort the array by an expression. By default for string values it sort by alphabetically and for the number values it sort by numerically,when you sort the array by numbers make sure that they are saved as numbers not as strings otherwise orderBy filter will not work.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Welcome in the Angular JS</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body ng-app="sampleApplication">
<div ng-controller="sampleController">
<div class="container">
<div class="row">
<div class="col-md-12">
Search <input type="text" ng-model="searchEmployee" />
</div>
</div>
<table class="table table-striped ">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Phone Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees | filter:searchEmployee | orderBy:'-age'">
<td>{{emp.name}}</td>
<td>{{emp.age}}</td>
<td>{{emp.phoneNumber}}</td>
<td><button class="btn btn-primary btn-xs">Edit</button> <button class="btn btn-danger btn-xs">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var app = angular.module('sampleApplication', []);
app.controller('sampleController', function ($scope) {
$scope.employees = [{ name: "Stewart", age: "25", phoneNumber: "563544466" },
{ name: "Stone", age: "34", phoneNumber: "657865856" },
{ name: "Grudin", age: "27", phoneNumber: "679423435" },
{ name: "Drucker", age: "25", phoneNumber: "343667789" },
{ name: "Davis", age: "44", phoneNumber: "456724423" },
{ name: "Crowfoot", age: "35", phoneNumber: "789345564" },
{ name: "Confucius", age: "26", phoneNumber: "243567333" },
{ name: "Burnett", age: "50", phoneNumber: "879344666" }];
});
</script>
</body>
</html>
We sort the employee collection by age. By default sorting is in ascending order if you want to do it in descending order simply prefix a ( - ) minus sign.