An Overview Of Filters In AngularJS

In this article we learn what filter module is and its characterstics, and after that create some custom filters as well.

Before reading this article, I highly recommended reading my previous articles on AngularJS.

I am using my previous project so I am not going to do things like adding controller, view, js and bootstrap file in our project. You can find all the steps at Bind data on view using ng-repeat in AngularJS.

What filter is

Filter is a module provided by AngularJS. If you don’t know what module is, then  please read my previous article on Module and Controller in AngularJS. There are nine components of filter which are provided by AngularJS. We can write custom as well.

  • currency
  • date
  • filter
  • json
  • limitTo
  • lowercase
  • number
  • uppercase

Currency:

It formats a number as currency. Default currency symbol is $(dollar).

  1. <td>{{data.Phone | currency}}  
  2. </td>  
filter

If I want that instead of $ as it appears in INR, then we have to write the following code. It take two parameters first and is about what we want to display before the number and second is how many numbers should display after the decimal. In this example I am passing two so it displays two numbers after the decimal.
  1. <td>{{data.Phone | currency :"INR-":2}}  
  2. </td>  
I made a change in HomeController.cs,
  1. using System;  
  2. using System.Web.Mvc;  
  3.   
  4. namespace AngularWithMVC.Controllers  
  5. {  
  6.     public class HomeController: Controller  
  7.     {  
  8.   
  9.         public ActionResult Index()  
  10.         {  
  11.             ViewBag.Heading = "Filter in AngularJs";  
  12.             return View();  
  13.         }  
  14.   
  15.         public JsonResult JsonValue()  
  16.         {  
  17.             var data = new []   
  18.             {  
  19.                 new   
  20.                 {  
  21.                     Name = "Pramod", Email = "Pramod@gmail.com", Phone = "987654321", Date = DateTime.Now.ToString()  
  22.                 },  
  23.                 new  
  24.                 {  
  25.                     Name = "Prem", Email = "Prem@gmail.com", Phone = "123456789", Date = DateTime.Now.AddDays(-5).ToString()  
  26.                 },  
  27.                 new  
  28.                 {  
  29.                     Name = "Ram", Email = "Ram@gmail.com", Phone = "9811234343", Date = DateTime.Now.AddDays(-10).ToString()  
  30.                 },  
  31.                 new  
  32.                 {  
  33.                     Name = "Shyam", Email = "Shyam@gmail.com", Phone = "9889657454", Date = DateTime.Now.AddDays(-15).ToString()  
  34.                 },  
  35.                 new  
  36.                 {  
  37.                     Name = "Jitesh", Email = "Jitesh@gmail.com", Phone = "9535468899", Date = DateTime.Now.AddDays(-20).ToString()  
  38.                 },  
  39.                 new  
  40.                 {  
  41.                     Name = "Rashmi", Email = "Rashmi@gmail.com", Phone = "965453532453", Date = DateTime.Now.AddDays(-25).ToString()  
  42.                 },  
  43.                 new  
  44.                 {  
  45.                     Name = "Sumit", Email = "Sumit@gmail.com", Phone = "9098867456343", Date = DateTime.Now.AddDays(-30).ToString()  
  46.                 },  
  47.                 new  
  48.                 {  
  49.                     Name = "Awashesh", Email = "Awashesh@gmail.com", Phone = "342658678574", Date = DateTime.Now.AddDays(-35).ToString()  
  50.                 }  
  51.             };  
  52.   
  53.             return Json(data, JsonRequestBehavior.AllowGet);  
  54.   
  55.         }  
  56.     }  
  57.   
  58. }  
filter

Date:

It formats the date on the basis of the  request of how we want to show the date. By default it shows the date format which comes from backend, but we change to it according to our need.

The best practise is that we manipulate the date on the server side and use the client side to display. But in this demo I am going to show how to do manipulation with date in AngularJS.

In above image we see the value of date column; it is in “dd-mm-yyyy hh-mm-ss”. It only comes when we choose date as string. But what if when we pass date as date not as string? Then output looks like the following.
  1. public JsonResult JsonValue()  
  2. {  
  3.   
  4.     var data = new []  
  5.     {  
  6.         new  
  7.         {  
  8.             Name = "Pramod", Email = "Pramod@gmail.com", Phone = "987654321", Date = DateTime.Now  
  9.         },  
  10.         new  
  11.         {  
  12.             Name = "Prem", Email = "Prem@gmail.com", Phone = "123456789", Date = DateTime.Now.AddDays(-5)  
  13.         },  
  14.         new  
  15.         {  
  16.             Name = "Ram", Email = "Ram@gmail.com", Phone = "9811234343", Date = DateTime.Now.AddDays(-10)  
  17.         },  
  18.         new  
  19.         {  
  20.             Name = "Shyam", Email = "Shyam@gmail.com", Phone = "9889657454", Date = DateTime.Now.AddDays(-15)  
  21.         },  
  22.         new   
  23.         {  
  24.             Name = "Jitesh", Email = "Jitesh@gmail.com", Phone = "9535468899", Date = DateTime.Now.AddDays(-20)  
  25.         },  
  26.         new  
  27.         {  
  28.             Name = "Rashmi", Email = "Rashmi@gmail.com", Phone = "965453532453", Date = DateTime.Now.AddDays(-25)  
  29.         },  
  30.         new  
  31.         {  
  32.             Name = "Sumit", Email = "Sumit@gmail.com", Phone = "9098867456343", Date = DateTime.Now.AddDays(-30)  
  33.         },  
  34.         new  
  35.         {  
  36.             Name = "Awashesh", Email = "Awashesh@gmail.com", Phone = "342658678574", Date = DateTime.Now.AddDays(-35)  
  37.         }  
  38.     };  
  39.     return Json(data, JsonRequestBehavior.AllowGet);  
  40.   
  41. }  
filter

As of now I am going to write a method in the data.js file for displaying the correct format for date.

Data.js
  1. $scope.ConvertDate = function(inputDate)  
  2. {  
  3.     var date = inputDate.replace(/\/Date\((.*?)\)\//gi, "$1");  
  4.     return date;  
  5. }  
In index.cshtml I made some changes. I am going to add a column Full Date.
  1. @ {  
  2.     ViewBag.Title = "Index";  
  3.     Layout = "~/Views/Shared/_layout.cshtml";  
  4. } <  
  5. script src = "~/Scripts/Data/Data.js" > < /script> <  
  6.     div class = "table-responsive"  
  7. style = "overflow:hidden; width:900px;"  
  8. ng - app = "myModule"  
  9. ng - controller = "myController" >  
  10.     <  
  11.     div style = "padding-left:20px;" >  
  12.     <  
  13.     table class = "table"  
  14. style = "width:900px" >  
  15.     <  
  16.     thead >  
  17.     <  
  18.     tr >  
  19.     <  
  20.     th > SN < /th> <  
  21.     th > Name < /th> <  
  22.     th > Email < /th> <  
  23.     th > Date < /th> <  
  24.     th > Full Date < /th> <  
  25.     th > Phone < /th> <  
  26.     /tr> <  
  27.     /thead> <  
  28.     tbody >  
  29.     <  
  30.     tr ng - repeat = "data in dataList" >  
  31.     <  
  32.     td > < span ng - class = "$odd?'label label-success' : 'label label-warning'" > {  
  33.         {  
  34.             $index + 1  
  35.         }  
  36.     } < /span></td >  
  37.     <  
  38.     td ng - bind = "data.Name" > < /td> <  
  39.     td ng - bind = "data.Email" > < /td> <  
  40.     td > {  
  41.         {  
  42.             ConvertDate(data.Date) | date  
  43.         }  
  44.     } < /td> <  
  45.     td > {  
  46.         {  
  47.             ConvertDate(data.Date) | date: 'fullDate'  
  48.         }  
  49.     } < /td> <  
  50.     td > {  
  51.         {  
  52.             data.Phone | currency: "INR-": 2  
  53.         }  
  54.     } < /td>  
  55.   
  56. <  
  57. /tr> <  
  58. /tbody> <  
  59. /table> <  
  60. /div> <  
  61. /div>  
Output

output

Note: This approach is not good. I am going to write a custom filter for it.

Filter:

Filters are used to modify the data. Filter is nothing but it a subset of that array in which we are trying to search and return a new array.

I am making some changes in index.cshtml file. Add the following code just after div which contains ng-app and ng-controller attribute.
  1. <div style="padding-left:20px;"><input style="width:850px" class="form-control" type="text" ng-model="searchText" placeholder="Search here" /></div>  
Add the following code where we write the ng-repeat tag and run it works for us.
  1. <tr ng-repeat="data in dataList | filter:searchText">  
Output

output

In the next article we will discuss other filters as well.

Hope this article was helpful.
 
Read more articles on AngularJS: