Post
Ask Question

Learn AngularJS From the Beginning - Part Two

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: 

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
  1. var testApp = angular.module('TestApp', []);   
Filter.html
  1. <!DOCTYPE html>  
  2. <html ng-app="TestApp">  
  3. <head>  
  4.     <title>AngularJS Filter</title>  
  5.     <script src="angular.js"></script>  
  6.     <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />  
  7.     <script src="app.js"></script>  
  8.     <script src="filter.js"></script>  
  9. </head>  
  10. <body ng-controller="FilterController">  
  11.     <div class="panel panel-default">  
  12.         <div class="panel-heading">  
  13.             <h3>  
  14.                 Products  
  15.                 <span class="label label-primary">{{products.length}}</span>  
  16.             </h3>  
  17.         </div>  
  18.         <div class="panel-body">  
  19.             <table class="table table-striped table-bordered table-condensed">  
  20.                 <thead>  
  21.                     <tr>  
  22.                         <td>Name</td>  
  23.                         <td>Category</td>  
  24.                         <td>Offer Date</td>  
  25.                         <td class="text-right">Quantity</td>  
  26.                         <td class="text-right">Price</td>  
  27.                     </tr>  
  28.                 </thead>  
  29.                 <tbody>  
  30.                     <tr ng-repeat="p in products | orderBy :'name'">  
  31.                         <td>{{p.name | uppercase}}</td>  
  32.                         <td>{{p.category | lowercase}}</td>  
  33.                         <td>{{getExpiryDate(p.expiry) | date:"dd MMM yy"}}</td>  
  34.                         <td class="text-right">{{p.quantity | number:2 }}</td>  
  35.                         <td class="text-right">{{p.price | currency}}</td>  
  36.                     </tr>  
  37.                 </tbody>  
  38.             </table>  
  39.         </div>  
  40.     </div>  
  41. </body>  
  42. </html>  
filter.js
  1. testApp.controller('FilterController', function ($scope) {  
  2.     $scope.products = [  
  3.                     { name: "Sony LED", category: "TV", price: 40000, quantity:10, expiry: 30 },  
  4.                     { name: "Samsung", category: "TV", price: 35640, quantity: 08, expiry: 21 },  
  5.                     { name: "Z30", category: "Mobile", price: 36000, quantity: 5, expiry: 50 },  
  6.                     { name: "Iphone 6", category: "Mobile", price: 55000, quantity: 6, expiry: 60 },  
  7.                     { name: "Galaxy Note 3", category: "Mobile", price: 45000, quantity: 15, expiry: 50 },  
  8.     ];  
  9.   
  10.     $scope.getExpiryDate = function (days) {  
  11.         var now = new Date();  
  12.         return now.setDate(now.getDate() + days);  
  13.     }  
  14.   
  15. });  
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 
  1. <!DOCTYPE html>  
  2. <html ng-app="TestApp">  
  3. <head>  
  4.     <title>AngularJS Custom Filter</title>  
  5.     <script src="angular.js"></script>  
  6.     <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />  
  7.     <script src="app.js"></script>  
  8.     <script src="CustomFilter.js"></script>  
  9.     <script src="CustomFilterCtrl.js"></script>  
  10. </head>  
  11. <body ng-controller="CustomFilterController">  
  12.     <div class="panel panel-default">  
  13.         <div class="panel-heading">  
  14.             <h3>  
  15.                 Products  
  16.                 <span class="label label-primary">{{products.length}}</span>  
  17.             </h3>  
  18.         </div>  
  19.         <div class="panel-body">  
  20.             <table class="table table-striped table-bordered table-condensed">  
  21.                 <thead>  
  22.                     <tr>  
  23.                         <td>Name</td>  
  24.                         <td>Category</td>  
  25.                         <td>Offer Date</td>  
  26.                         <td class="text-right">Quantity</td>  
  27.                         <td class="text-right">Price</td>  
  28.                     </tr>  
  29.                 </thead>  
  30.                 <tbody>  
  31.                     <tr ng-repeat="p in products | orderBy :'name'">  
  32.                         <td>{{p.name | properCase}}</td>  
  33.                         <td>{{p.category | properCase : false}}</td>  
  34.                         <td>{{getExpiryDate(p.expiry) | date:"dd MMM yy"}}</td>  
  35.                         <td class="text-right">{{p.quantity | number:2 }}</td>  
  36.                         <td class="text-right">{{p.price | currency}}</td>  
  37.                     </tr>  
  38.                 </tbody>  
  39.             </table>  
  40.         </div>  
  41.     </div>  
  42. </body>  
  43. </html>  
CustomFilter.js 
  1. testApp.filter("properCase", function () {  
  2.     return function (value, reverse) {  
  3.         if (angular.isString(value)) {  
  4.             var intermediate = reverse == false ? value.toUpperCase() : value.toLowerCase();  
  5.             return (reverse == false ? intermediate[0].toLowerCase() :  
  6.             intermediate[0].toUpperCase()) + intermediate.substr(1);  
  7.         } else {  
  8.             return value;  
  9.         }  
  10.     };  
  11. });  
CustomFilterCtrl.js
  1. testApp.controller('CustomFilterController', function ($scope) {  
  2.     $scope.products = [  
  3.                     { name: "SONY LED", category: "TV", price: 40000, quantity: 10, expiry: 30 },  
  4.                     { name: "SAMSUNG", category: "TV", price: 35640, quantity: 08, expiry: 21 },  
  5.                     { name: "BLACKBERRY Z30", category: "Mobile", price: 36000, quantity: 5, expiry: 50 },  
  6.                     { name: "IPHONE 6", category: "Mobile", price: 55000, quantity: 6, expiry: 60 },  
  7.                     { name: "GALAXY NOTE 3", category: "Mobile", price: 45000, quantity: 15, expiry: 50 },  
  8.     ];  
  9.   
  10.     $scope.getExpiryDate = function (days) {  
  11.         var now = new Date();  
  12.         return now.setDate(now.getDate() + days);  
  13.     }  
  14.   
  15. });  
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
  1. <!DOCTYPE html>  
  2. <html ng-app="TestApp">  
  3. <head>  
  4.     <title>AngularJS Custom Collection Filter</title>  
  5.     <script src="angular.js"></script>  
  6.     <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />  
  7.     <script src="app.js"></script>  
  8.     <script src="CollectionFilter.js"></script>  
  9.     <script src="CollectionFilterCtrl.js"></script>
  10. </head>  
  11. <body ng-controller="CollectionFilterController">  
  12.     <div class="panel panel-default">  
  13.         <div class="panel-heading">  
  14.             <h3>  
  15.                 Products  
  16.                 <span class="label label-primary">{{products.length}}</span>  
  17.             </h3>  
  18.         </div>  
  19.         <div class="panel-body">  
  20.             <table class="table table-striped table-bordered table-condensed">  
  21.                 <thead>  
  22.                     <tr>  
  23.                         <td>Name</td>  
  24.                         <td>Category</td>  
  25.                         <td>Offer Date</td>  
  26.                         <td class="text-right">Quantity</td>  
  27.                         <td class="text-right">Price</td>  
  28.                     </tr>  
  29.                 </thead>  
  30.                 <tbody>  
  31.                     <tr ng-repeat="p in products | orderBy :'name' | skipRec:2">  
  32.                         <td>{{p.name }}</td>  
  33.                         <td>{{p.category }}</td>  
  34.                         <td>{{getExpiryDate(p.expiry) | date:"dd MMM yy"}}</td>  
  35.                         <td class="text-right">{{p.quantity | number:2 }}</td>  
  36.                         <td class="text-right">{{p.price | currency}}</td>  
  37.                     </tr>  
  38.                 </tbody>  
  39.             </table>  
  40.         </div>  
  41.     </div>  
  42. </body>  
  43. </html>  
CollectionFilterCtrl.js
  1. testApp.controller('CollectionFilterController', function ($scope) {  
  2.     $scope.products = [  
  3.                     { name: "SONY LED", category: "TV", price: 40000, quantity: 10, expiry: 30 },  
  4.                     { name: "SAMSUNG", category: "TV", price: 35640, quantity: 08, expiry: 21 },  
  5.                     { name: "Blackberry Z30", category: "Mobile", price: 36000, quantity: 5, expiry: 50 },  
  6.                     { name: "IPHONE 6", category: "Mobile", price: 55000, quantity: 6, expiry: 60 },  
  7.                     { name: "GALAXY NOTE 3", category: "Mobile", price: 45000, quantity: 15, expiry: 50 },  
  8.     ];  
  9.   
  10.     $scope.getExpiryDate = function (days) {  
  11.         var now = new Date();  
  12.         return now.setDate(now.getDate() + days);  
  13.     }  
  14.   
  15. });  
CollectionFilter.js
  1. testApp.filter("skipRec", function () {  
  2.     return function (data, count) {  
  3.         if (angular.isArray(data) && angular.isNumber(count)) {  
  4.             if (count > data.length || count < 1) {  
  5.                 return data;  
  6.             } else {  
  7.                 return data.slice(count);  
  8.             }  
  9.         } else {  
  10.             return data;  
  11.         }  
  12.     }  
  13. });  
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. 
 
Read more articles on AngularJS:


Similar Articles