Filter in angularJs – Part 1

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

I am using my previous project so I am not going to do all these stuff 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 don’t know what module is the please read my previous article Module and Controller in angularJS. There are 9 component of filter which is 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 $(dollor).

{{data.Phone | currency}}

default currency

If I want that instead of $ its appear INR- the we have to write following code. It take 2 parameter first is about what we want to display before the number and second is how many number should display after decimal. In this example I am passing 2 so it display two number after decimal.

{{data.Phone | currency :"INR-":2}}

I made a change in HomeController.cs

using System;
using System.Web.Mvc;

namespace AngularWithMVC.Controllers
{
    public class HomeController : Controller
    {
        
        public ActionResult Index()
        {
            ViewBag.Heading = "Filter in AngularJs";
            return View();
        }

        public JsonResult JsonValue()
        {
            var data = new[]{ new {Name="Pramod",Email="Pramod@gmail.com",Phone="987654321",Date=DateTime.Now.ToString()},
             new {Name="Prem",Email="Prem@gmail.com",Phone="123456789",Date=DateTime.Now.AddDays(-5).ToString()},
             new {Name="Ram",Email="Ram@gmail.com",Phone="9811234343",Date=DateTime.Now.AddDays(-10).ToString()},
             new {Name="Shyam",Email="Shyam@gmail.com",Phone="9889657454",Date=DateTime.Now.AddDays(-15).ToString()},
             new {Name="Jitesh",Email="Jitesh@gmail.com",Phone="9535468899",Date=DateTime.Now.AddDays(-20).ToString()},
             new {Name="Rashmi",Email="Rashmi@gmail.com",Phone="965453532453",Date=DateTime.Now.AddDays(-25).ToString()},
             new {Name="Sumit",Email="Sumit@gmail.com",Phone="9098867456343",Date=DateTime.Now.AddDays(-30).ToString()},
             new {Name="Awashesh",Email="Awashesh@gmail.com",Phone="342658678574",Date=DateTime.Now.AddDays(-35).ToString()}
            };

            return Json(data, JsonRequestBehavior.AllowGet);

        }
	}
}

custom currency

Date: It format the date on the basis of request that 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 server side and use 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 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.

public JsonResult JsonValue()
        {
            
            var data = new[]{ new {Name="Pramod",Email="Pramod@gmail.com",Phone="987654321",Date=DateTime.Now},
             new {Name="Prem",Email="Prem@gmail.com",Phone="123456789",Date=DateTime.Now.AddDays(-5)},
             new {Name="Ram",Email="Ram@gmail.com",Phone="9811234343",Date=DateTime.Now.AddDays(-10)},
             new {Name="Shyam",Email="Shyam@gmail.com",Phone="9889657454",Date=DateTime.Now.AddDays(-15)},
             new {Name="Jitesh",Email="Jitesh@gmail.com",Phone="9535468899",Date=DateTime.Now.AddDays(-20)},
             new {Name="Rashmi",Email="Rashmi@gmail.com",Phone="965453532453",Date=DateTime.Now.AddDays(-25)},
             new {Name="Sumit",Email="Sumit@gmail.com",Phone="9098867456343",Date=DateTime.Now.AddDays(-30)},
             new {Name="Awashesh",Email="Awashesh@gmail.com",Phone="342658678574",Date=DateTime.Now.AddDays(-35)}
            };
            return Json(data, JsonRequestBehavior.AllowGet);

        }

Tags: ,