Learn AngularJS From the Beginning - Part Two

Daisy Princess
8y
8.3k
0
0

Article

I am here to continue the discussion around AngularJS. Today, we will go through one of the main feature of the Angular js i.e., filter. Also in case you have not had a look at our previous articles of this series, go through the following links:

Learn AngularJS from Beginning - Part 1

Now in this article, we will discuss one of the main categories of Angular js, i.e. filter. In AngularJS, filter basically transforms the data before it’s processed by a model or directive and displayed in a view without making any changes in the original data in the $scope objects. Filters also allow us to display the same data in different formats in different part of the application. In AngularJS, there are some built in filters and also we can create custom filters as per our requirements.

Built In Filters in AngularJS

In AngularJS, there are several built in filters which can be used to display the data as per desired formats. Below we discuss some of the main build in filters of AngularJS for single value.

Filter Name	Description	Sample Code
currency	This filter format currency value	{{ p.price \| currency}}
date	This filter format date value	{{ p.orderDate \| date : “dd MMM yyyy” }} {{ p.orderDate \| date : “shortDate” }}
json	This filter generates an object from a JSON string	<tr ng-repeat="p in products"> <td colspan="4">{{p \| json}}</td> </tr>
number	This filter formats a numerical value. The number filter formats numeric data values to fix the number of decimal places displayed, rounding the value as required.	{{ p.price \| number : 0}} – no decimal values {{ p.price \| number : 2}} – 2 decimal values
uppercase lowercase	These filters formats a string value into all uppercase or lowercase letters.	{{ p.city \| lowercase }} {{ p.state \| uppercase }}
limitTo	The limitTo filter restricts the number of items taken from an array of data objects. This can be useful when working with a layout that can accommodate only a certain number of items.	<tr ng-repeat="p in products \| limitTo:10"> Above example show in ng-repeat it display only first 10 items inspite of products contains more than 10 item in array.
orderBy	This filter is used to sort the objects in an array. For sort the data in descending order just need to mentioned – sign in the filter expression.	<tr ng-repeat="p in products \| orderBy : ‘name’”> For descending order <tr ng-repeat="p in products \| orderBy : ‘-name’”>

For date filter, we need to provide exact set of format for date, month and year. Below I provide the list of string components supported by the date filters,

Component	Description
yyyy	A four-digit representation of the year (e.g., 2050)
yy	A two-digit representation of the year (e.g., 50)
MMMM	The full month name (e.g., January)
MMM	Short representation of the month (e.g., Jan)
MM	Numeric month, padded to two characters (e.g., 01)
M	Numeric month, without padding (e.g., 1)
dd	Day of month, padded to two characters (e.g., 02)
d	Day of month, no padding (e.g., 2)
EEEE	Full name of day of week (e.g., Tuesday)
EEE	Short name of day of week (e.g., Tue)
HH	Hour in day, 24-hour clock with padding to two characters (e.g., 02)
H	Hour in day, 24-hour clock without padding (e.g., 2)
hh	Hour in day, 12-hour clock with padding to two characters (e.g., 02)
h	Hour in day, 12-hour clock without padding (e.g., 2)
mm	Minute in hour, padded to two characters (e.g., 02)
m	Minute in hour without padding (e.g., 2)
ss	Second in minute, padded to two characters (e.g., 02)
s	Second in minute without padding (e.g., 2)
a	Marker for a.m./p.m.
Z	Four-character representation of time zone

To demonstrate the AngularJS default filter, follow the below examples,

App.js

var testApp = angular.module('TestApp', []);

Filter.html

<!DOCTYPE html>
<html ng-app="TestApp">
<head>
<title>AngularJS Filter</title>
<script src="angular.js"></script>
<link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
<script src="app.js"></script>
<script src="filter.js"></script>
</head>
<body ng-controller="FilterController">
<div class="panel panel-default">
<div class="panel-heading">
<h3>
Products
<span class="label label-primary">{{products.length}}</span>
</h3>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<td>Name</td>
<td>Category</td>
<td>Offer Date</td>
<td class="text-right">Quantity</td>
<td class="text-right">Price</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in products | orderBy :'name'">
<td>{{p.name | uppercase}}</td>
<td>{{p.category | lowercase}}</td>
<td>{{getExpiryDate(p.expiry) | date:"dd MMM yy"}}</td>
<td class="text-right">{{p.quantity | number:2 }}</td>
<td class="text-right">{{p.price | currency}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

filter.js

testApp.controller('FilterController', function ($scope) {
$scope.products = [
{ name: "Sony LED", category: "TV", price: 40000, quantity:10, expiry: 30 },
{ name: "Samsung", category: "TV", price: 35640, quantity: 08, expiry: 21 },
{ name: "Z30", category: "Mobile", price: 36000, quantity: 5, expiry: 50 },
{ name: "Iphone 6", category: "Mobile", price: 55000, quantity: 6, expiry: 60 },
{ name: "Galaxy Note 3", category: "Mobile", price: 45000, quantity: 15, expiry: 50 },
];
$scope.getExpiryDate = function (days) {
var now = new Date();
return now.setDate(now.getDate() + days);
}
});

Output of the above program is as below,

Custom Filters

AngularJS not only supports the built in filters, also we can create our own custom filter as per our requirement instead of use the built in filters. Custom filters can be created by the module.filter method. Actually, internally AngularJS uses the filterprovider. This factory function must be return a function which takes input values as argument. The filter function should be a pure function, which means that it should be stateless and idempotent. Angular relies on these properties and executes the filter only when the inputs to the function change. The module.filter method actually takes two arguments – name of the filter that need to be create and a factory function that creates the worker function that will undertake the actual work.

Here, I created a custom filter which basically convert sany string value into Sentence case.

CustomFilter.html

<!DOCTYPE html>
<html ng-app="TestApp">
<head>
<title>AngularJS Custom Filter</title>
<script src="angular.js"></script>
<link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
<script src="app.js"></script>
<script src="CustomFilter.js"></script>
<script src="CustomFilterCtrl.js"></script>
</head>
<body ng-controller="CustomFilterController">
<div class="panel panel-default">
<div class="panel-heading">
<h3>
Products
<span class="label label-primary">{{products.length}}</span>
</h3>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<td>Name</td>
<td>Category</td>
<td>Offer Date</td>
<td class="text-right">Quantity</td>
<td class="text-right">Price</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in products | orderBy :'name'">
<td>{{p.name | properCase}}</td>
<td>{{p.category | properCase : false}}</td>
<td>{{getExpiryDate(p.expiry) | date:"dd MMM yy"}}</td>
<td class="text-right">{{p.quantity | number:2 }}</td>
<td class="text-right">{{p.price | currency}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

CustomFilter.js

testApp.filter("properCase", function () {
return function (value, reverse) {
if (angular.isString(value)) {
var intermediate = reverse == false ? value.toUpperCase() : value.toLowerCase();
return (reverse == false ? intermediate[0].toLowerCase() :
intermediate[0].toUpperCase()) + intermediate.substr(1);
} else {
return value;
}
};
});

CustomFilterCtrl.js

testApp.controller('CustomFilterController', function ($scope) {
$scope.products = [
{ name: "SONY LED", category: "TV", price: 40000, quantity: 10, expiry: 30 },
{ name: "SAMSUNG", category: "TV", price: 35640, quantity: 08, expiry: 21 },
{ name: "BLACKBERRY Z30", category: "Mobile", price: 36000, quantity: 5, expiry: 50 },
{ name: "IPHONE 6", category: "Mobile", price: 55000, quantity: 6, expiry: 60 },
{ name: "GALAXY NOTE 3", category: "Mobile", price: 45000, quantity: 15, expiry: 50 },
];
$scope.getExpiryDate = function (days) {
var now = new Date();
return now.setDate(now.getDate() + days);
}
});

The output of the above program is,

In the above output, you can see that I defined the data in controller file in upper case for the field of Name. Also define category field value in proper case. But in html file, I use the custom filter properCase for name field and in case of category field I use properCase filter with false arguments. Basically, I mentioned arguments as false, then I simply make the opposite transformation ofthe proper case.

Create a Collection Filter

The process for creating a filter that operates on a collection of objects is just the same but is worth demonstrating anyway. In this section, I am going to build a skip filter that removes a specified number of items from the list of the array.

CollectionFilter.html

<!DOCTYPE html>
<html ng-app="TestApp">
<head>
<title>AngularJS Custom Collection Filter</title>
<script src="angular.js"></script>
<link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
<script src="app.js"></script>
<script src="CollectionFilter.js"></script>
<script src="CollectionFilterCtrl.js"></script>
</head>
<body ng-controller="CollectionFilterController">
<div class="panel panel-default">
<div class="panel-heading">
<h3>
Products
<span class="label label-primary">{{products.length}}</span>
</h3>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<td>Name</td>
<td>Category</td>
<td>Offer Date</td>
<td class="text-right">Quantity</td>
<td class="text-right">Price</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in products | orderBy :'name' | skipRec:2">
<td>{{p.name }}</td>
<td>{{p.category }}</td>
<td>{{getExpiryDate(p.expiry) | date:"dd MMM yy"}}</td>
<td class="text-right">{{p.quantity | number:2 }}</td>
<td class="text-right">{{p.price | currency}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

CollectionFilterCtrl.js

testApp.controller('CollectionFilterController', function ($scope) {
$scope.products = [
{ name: "SONY LED", category: "TV", price: 40000, quantity: 10, expiry: 30 },
{ name: "SAMSUNG", category: "TV", price: 35640, quantity: 08, expiry: 21 },
{ name: "Blackberry Z30", category: "Mobile", price: 36000, quantity: 5, expiry: 50 },
{ name: "IPHONE 6", category: "Mobile", price: 55000, quantity: 6, expiry: 60 },
{ name: "GALAXY NOTE 3", category: "Mobile", price: 45000, quantity: 15, expiry: 50 },
];
$scope.getExpiryDate = function (days) {
var now = new Date();
return now.setDate(now.getDate() + days);
}
});

CollectionFilter.js

testApp.filter("skipRec", function () {
return function (data, count) {
if (angular.isArray(data) && angular.isNumber(count)) {
if (count > data.length || count < 1) {
return data;
} else {
return data.slice(count);
}
} else {
return data;
}
}
});

The output of the above program is,

In the above output, you can see that first two records do not populate in the screen since I provide 2 in the skipRec filter. Basically, this filter eliminates the first two records from the array and displays other records.