An Overview Of Filters In AngularJS

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 = "[email protected]", Phone = "987654321", Date = DateTime.Now.ToString()  
  22.                 },  
  23.                 new  
  24.                 {  
  25.                     Name = "Prem", Email = "[email protected]", Phone = "123456789", Date = DateTime.Now.AddDays(-5).ToString()  
  26.                 },  
  27.                 new  
  28.                 {  
  29.                     Name = "Ram", Email = "[email protected]", Phone = "9811234343", Date = DateTime.Now.AddDays(-10).ToString()  
  30.                 },  
  31.                 new  
  32.                 {  
  33.                     Name = "Shyam", Email = "[email protected]", Phone = "9889657454", Date = DateTime.Now.AddDays(-15).ToString()  
  34.                 },  
  35.                 new  
  36.                 {  
  37.                     Name = "Jitesh", Email = "[email protected]", Phone = "9535468899", Date = DateTime.Now.AddDays(-20).ToString()  
  38.                 },  
  39.                 new  
  40.                 {  
  41.                     Name = "Rashmi", Email = "[email protected]", Phone = "965453532453", Date = DateTime.Now.AddDays(-25).ToString()  
  42.                 },  
  43.                 new  
  44.                 {  
  45.                     Name = "Sumit", Email = "[email protected]", Phone = "9098867456343", Date = DateTime.Now.AddDays(-30).ToString()  
  46.                 },  
  47.                 new  
  48.                 {  
  49.                     Name = "Awashesh", Email = "[email protected]", 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 = "[email protected]", Phone = "987654321", Date = DateTime.Now  
  9.         },  
  10.         new  
  11.         {  
  12.             Name = "Prem", Email = "[email protected]", Phone = "123456789", Date = DateTime.Now.AddDays(-5)  
  13.         },  
  14.         new  
  15.         {  
  16.             Name = "Ram", Email = "[email protected]", Phone = "9811234343", Date = DateTime.Now.AddDays(-10)  
  17.         },  
  18.         new  
  19.         {  
  20.             Name = "Shyam", Email = "[email protected]", Phone = "9889657454", Date = DateTime.Now.AddDays(-15)  
  21.         },  
  22.         new   
  23.         {  
  24.             Name = "Jitesh", Email = "[email protected]", Phone = "9535468899", Date = DateTime.Now.AddDays(-20)  
  25.         },  
  26.         new  
  27.         {  
  28.             Name = "Rashmi", Email = "[email protected]", Phone = "965453532453", Date = DateTime.Now.AddDays(-25)  
  29.         },  
  30.         new  
  31.         {  
  32.             Name = "Sumit", Email = "[email protected]", Phone = "9098867456343", Date = DateTime.Now.AddDays(-30)  
  33.         },  
  34.         new  
  35.         {  
  36.             Name = "Awashesh", Email = "[email protected]", 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:

Up Next
    Ebook Download
    View all
    Learn
    View all