Learn about 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,

• Overview Of AngularJS
• Modules And Controller In AngularJS
• Controllers in AngularJS
• AngularJS ng src Directive
• AngularJS ng-Repeat Directive
• Handling Events In AngularJS
• How To Use Two-Way Data Binding In AngularJS

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 the 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 the array, we will pass values to this as,

{ name: "Akshay", dateOfBirth: new Date("July 21, 1960"), Address: "Mumbai", Salary: "1234.34" },
{ name: "Milind", dateOfBirth: new Date("July 20, 1960"), phoneNumber: "Nashik", Salary: "12.34" },
{ name: "Raghvan", dateOfBirth: new Date("July 19, 1960"), phoneNumber: "Pune", Salary: "1235.34" },
{ name: "Hari", dateOfBirth: new Date("July 18, 1960"), phoneNumber: "Mumbai", Salary: "5589.34" }

Now we will be attaching those to the $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 include a table and then include a third section,

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Date of Birth</th>
            <th>Address</th>
            <th>Salary</th>
            <th>Salary</th>
        </tr>
    </thead>

We will include another salary section to convert those salaries

Now let's include a body and tr elements below

In <tr> we will write the 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,

<tbody>
    <tr ng-repeat="employee in employees">
        <td>{{employee.name}}</td>
        <td>{{employee.dateOfBirth}}</td>
        <td>{{employee.Address}}</td>
        <td>{{employee.Salary}}</td>
        <td>{{employee.Salary}}</td>
    </tr>
</tbody>

So our Code is,

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Date of Birth</th>
            <th>Address</th>
            <th>Salary</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="employee in employees">
            <td>{{employee.name}}</td>
            <td>{{employee.dateOfBirth}}</td>
            <td>{{employee.Address}}</td>
            <td>{{employee.Salary}}</td>
            <td>{{employee.Salary}}</td>
        </tr>
    </tbody>
</table>

Now run the 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 capitalized and the rest should be lowercase. 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

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

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

So our final code is,

<tr ng-repeat="employee in employees">
    <td>{{employee.name | uppercase}}</td>
    <td>{{employee.dateOfBirth | date: "dd/MM/yyyy"}}</td>
    <td>{{employee.Address | lowercase}}</td>
    <td>{{employee.Salary}}</td>
    <td>{{employee.Salary}}</td>
</tr>

Now just run the solution and you will see,

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,

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

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

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

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

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

Now run the solution,

As we had got a $ currency symbol, if you want to 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 the 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 lines are as I had taken input type as the number we will be incrementing a numeric value and step as 1 for increment or to decrement that value ... minimum element is 0 and the maximum is 4 depending 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 attach the 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.

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,

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

Now reload the page and see the output.

We got Raghvan's result displayed.

Now we have hardcoded the values -- now we will add that row limit to our Limit filter as

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

Now just run the solution and you will see it as

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

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 these were Filters in Angular JS. I hope this article was helpful !!