Post
Ask Question

Filters In AngularJS

Overview

In this article we will see Filters in Angular JS  -- how they work and their functionalities with an example .

Do refer to previous articles here,

In Angular JS filters can be used to sort and filter data . Filters can be used with a binding expression and also with a directive, and we will have a look at both parts .

To apply filter we use a pipe(|) character

Syntax

{{expression | filtername : parameter }}

Filters can also format data --  there are some inbuilt filters available in Angular JS.

There are some Angular JS date formats too, for more Angular JS date formats you can refer to this link.

There is another filter called limit; to filter here in this filter, we can limit the character strings and so on.

Syntax

{{expression | limit : limitTo :begin }}

Here in Angular JS filters are called employees. I want to display their name, DOB, address and salary
So in our model we will first create an array called employees

Var employees=[];

Now  in array we will pass values to this as,

  1. { name: "Akshay", dateOfBirth: new Date("July 21,1960"),Address: "Mumbai", Salary: "1234.34" },  
  2. { name: "Milind", dateOfBirth: new Date("July 20,1960"), phoneNumber: "Nashik", Salary: "12.34" },  
  3. { name: "Raghvan", dateOfBirth: new Date("July 19,1960"), phoneNumber: "Pune", Salary: "1235.34" },  
  4. { name: "Hari", dateOfBirth: new Date("July 18,1960"), phoneNumber: "Mumbai", Salary: "5589.34" }  
And now we will be attaching those to $scope object as,

$scope.employees = employees;

Now let's go back to our View,

We will be displaying those records in a tabular format so incude a table and then include a thead section,
  1. <table>  
  2.     <thead>  
  3.         <tr>  
  4.             <th>Name</th>  
  5.             <th>Date of Birth</th>  
  6.             <th>Address</th>  
  7.             <th>Salary</th>  
  8.             <th>Salary</th>  
  9.         </tr>  
  10.     </thead>  
We will incule another salary section to convert those salaries

Now let's include a body and tr elements below

And in <tr> we will write ng-repeat directive as

<tr ng-repeat=”employee in employees”>

Now we will add <td> element and with the help of binding expression we will pass those values

So our code is,
  1. <tbody>  
  2.     <tr ng-repeat="employee in employees">  
  3.         <td>{{employee.name}}</td>  
  4.         <td>{{employee.dateOfBirth}}</td>  
  5.         <td>{{employee.Address}}</td>  
  6.         <td>{{employee.Salary}}</td>  
  7.         <td>{{employee.Salary}}</td>  
  8.     </tr>  
  9. </tbody>  
So our Code is,
  1. <table>  
  2.     <thead>  
  3.         <tr>  
  4.             <th>Name</th>  
  5.             <th>Date of Birth</th>  
  6.             <th>Address</th>  
  7.             <th>Salary</th>  
  8.             <th>Salary</th>  
  9.         </tr>  
  10.     </thead>  
  11.     <tbody>  
  12.         <tr ng-repeat="employee in employees">  
  13.             <td>{{employee.name}}</td>  
  14.             <td>{{employee.dateOfBirth}}</td>  
  15.             <td>{{employee.Address}}</td>  
  16.             <td>{{employee.Salary}}</td>  
  17.             <td>{{employee.Salary}}</td>  
  18.         </tr>  
  19.     </tbody>  
  20. </table>  
Now run the solution,

solution

As you can see from the above output we got the desired result: Name, DOB, Address and salary

Now we will see Filters one by one

Here in this output if I want to display it should be capital and the rest should be lower case. Similarly, for Address I want everything to be lowercase. 

We will use here uppercase and lowercase filters.

So let's see how we are going to use it -- now go back to our view in our Name binding expression and Address Binding expression just write this

code
Now look at the ouput above; DOB is displaying a complete string if I want a date part like dd-mm-yyyy and so on in binding expression of DOB write this as,

<td>{{employee.dateOfBirth | date : "dd/MM/yyyy"}}</td>

So our final code is,
  1. <tr ng-repeat="employee in employees">  
  2.     <td>{{employee.name | uppercase }}</td>  
  3.     <td>{{employee.dateOfBirth | date : "dd/MM/yyyy" }}</td>  
  4.     <td>{{employee.Address | lowercase }}</td>  
  5.     <td>{{employee.Salary }}</td>  
  6.     <td>{{employee.Salary }}</td>  
  7. </tr>  
Now just run the solution and you will see,

solution

From the above output we got Name and everything in capitals --  see DOB column as we had written format we also got address field with everything in lower case .

Now let's apply a number filter on salary .

<td>{{employee.Salary | number }}</td>

Now let's see the output,

output

Now you can see as soon as we applied number filter the salary section got a thousand separators if you compare outputs .

If you want to limit the values to 2 decimal places as,

<td>{{employee.Salary | number :2 }}</td>

Now let's see the currency filter --  in another salary column I am applying currency filter,

<td>{{employee.Salary| currency }}</td>

Now run the solution,

solution

As we had got a $ currency symbol, if  you want pound, durham and so on just use the symbol

If you want to limit a decimal place to 2 use it as,

<td>{{employee.Salary| currency:”symbol”:2 }}</td>

So we saw various filters like currency, date, lowercase and uppercase.

Now let's see Limit To Filters

Now suppose I want a user to enter how many rows they want to see  -- suppose 3,4 and so on --  So let's switch back to our view part.

Now just above the table Tag add these lines

How Many Rows You Want : <input type="number" step="1" min="0" max="4" ng-model="rowLimit" />

We will see what these line are as I had taken input type as number we will be incrementing a numeric value and step as 1 for increment or to decrement that value ... minmum element is 0 and maximum is 4 that depends on how much you had specified in your array .

I used ng-mode as rowLimit but presently we don’t have that in our model.

It's simple just go back to our model and attach row limit to our $scope and write the initial value by default -- how many values you want to show,

$scope.rowLimit = 1;

Now we will hard code that value in our tr tag where we had written ng-repeat directive as

<tr ng-repeat="employee in employees | limitTo:1">

As you can see I put a Pipe (|) and limitTo filter and hardcoded the value there as 1 . Now run the solution you will see only 1 Value .

solution

We got only one row . But now as you can see from the output we got the result which is present at the top; i.e, Akshay sees the model part,

code

Now suppose I want Raghvan first then just specify index; as index starts with 0, we will specify index position.

Now reload the page and see the output.

output

We had got Raghvan result displaying .

Now we had harcoded the values --  now we will add that rowLimit to our Limit filter as

<tr ng-repeat="employee in employees | limitTo:rowLimit">

Now just run the solution and you will see it as

solution

By default one record is there but when you move the textbox values as 2 or 3 or 4 you will see the value gets added as,

output

Now you can also put a value there as 2 or 3 it will automatically bind the model as we had attached with $scope object  -- that’s the main benefit of Angular JS two way data binding.

Conclusion: So this was Filters in Angular JS . I hope this article was helpful !!


Similar Articles