AngularJs filters are used to format (filter/sort) the data that we display to the users.

The AngularJs filters are executed in the client side, no need to communicate with server to filer the data.

In this tutorial we are going to learn about what all available filters in AngularJs, how it works with beautiful examples.

AngularJs Filters :

We can do the below operation by using the AngularJs Filters.

• We can convert the data into lower case to upper case and vice-versa.
• We can attach currency symbols in front of the currency.
• Filter the items based on search string.
• Sort the items based on our requirement

AngularJs provides us several built in filters to perform above operations. Use the following options to implement the filters.

• lowercase
• uppercase
• currency
• order by
• filer()

Order by and filter() options capable on ng-repeat directive.

Example for lowercase filer :

The lowercase filer is used to convert the uppercase string to lowercase. We can apply the filter using pipe symbol “|” to any directive. Here we are applying the lowercase filter to ng-repeat directive.

<tr ng-repeat="employee in employees">
            <td>{{employee.empId}}</td>
            <td>{{employee.empName | lowercase}}</td>
</tr>

Example for uppercase filer :

The uppercase filer is used to convert the String lowercase to uppercase. We can apply the filter using pipe symbol “|”.

<tr ng-repeat="employee in employees">
            <td>{{employee.empId}}</td>
            <td>{{employee.empName | uppercase}}</td>
</tr>

Example for currency filer :

currency filter is used to attach the currency symbol in front of currency. We can apply the filter using pipe symbol “|”.

<tr ng-repeat="employee in employees">
            <td>{{employee.empId}}</td>
            <td>{{employee.empName | uppercase}}</td>
            <td>{{employee.empSal | currency}}</td>
</tr>

Example for order by filer :

order by filter is used to arrange the application data in a particular order. We can apply the filter using pipe symbol “|”.

<tr ng-repeat="employee in employees | orderBy:employee:true">
            <td>{{employee}}</td>
</tr>

Example for filer() :

The filter is used to filer the application data based on our requirement.

<tr ng-repeat="employee in employees | filter:{'empName':searchByName,'deptId':searchByDept}">
            <td>{{employee.empId }}</td>
            <td>{{employee.empName }}</td>
            <td>{{employee.deptId }}</td>
</tr>

Happy Learning 🙂