Angular JS Filters Example

Learn how to use Angular JS Filter Service, we will see some examples of using filters like angularjs filter array, angularjs filter date, angularjs filter json, angularjs filter number etc.

Using Filters in AngularJs

There are many filters in AngularJs, filters can be added to any expressions by simply using the pipe character.

Here are some Angular filters

lowercase Format a string to lower case.
uppercase Format a string to upper case.
currency Format a number to a currency format.
date Format a date to a specified format.
filter Select a subset of items from an array.
json Format an object to a JSON string.
limitTo Limits an array or string to a fix number of elements or characters.
number Format a number to a string.
orderBy Orders an array by an expression.

Angular filters examples

Now we experiment different filters with some student data

<div ng-app="myApp" ng-controller="studentCtrl">
Name in lowercare: {{ fullname | lowercase }} 

        Name in uppercase:  {{ fullname | uppercase  }}    
        </div>

Here is my angular script for settingup data

<script>
angular.module('myApp', []).controller('studentCtrl', function ($scope) {
    $scope.fullname = "Abhinandan Varthaman"               
});
</script>

Here is the result

Name in lowercare: {{ fullname | lowercase }}

Name in uppercase: {{ fullname | uppercase }}

Angular filter Array
Now we learn how to use filter with an Array collection, we can sort collection by any property name

Here we have created an array of an object with two properties and hardcoded value, you can create such array with any scripting language or programming language we want and just get that collection in JSON form, your collection object can have any number of property.

<script>
            $scope.countryArray = [
                    { capital: 'New Delhi', country: 'India' },
                    { capital: 'Washington, D.C', country: 'USA' },
                    { capital: 'London', country: 'UK' },
                    { capital: 'Canberra', country: 'Australia' },
                    { capital: 'Ottawa', country: 'Canada' },
                    { capital: 'Bern', country: 'Switzerland' },
                    { capital: 'Copenhagen', country: 'Denmark' },
                    { capital: 'Berlin', country: 'Germany' },
                    { capital: 'Oslo', country: 'Norway' }
            ];
            $scope.orderByObject = function (x) {
                $scope.wtrOrderBy = x;
            }
        </script>

In this example based on user input we rearrange the collection with matching values

{{ x.capital + ', ' + x.country }}

Angular filter : Select subset of items from an array (implementation sample code for above example)

<div ng-controller="studentCtrl">
<p> <input type="text" ng-model="userInput"> </p>
<ul style="margin-left: 50px;">
<li ng-repeat="x in countryArray | filter : userInput">
    { { x.capital + ', ' + x.country } }
</li>
</ul>
</div>

Sorting collection using filter in AngularJs

Another example of sorting the whole collection based on column value, when user click on any particular column, we sort the collection

Just click on column name to sort the collection

Capital	Country
{{x.capital}}	{{x.country}}

Here is the code

<table>
<tr>
<th ng-click="orderByObject('capital')">Capital </th>
<th ng-click="orderByObject('country')">Country </th>
</tr>
<tr ng-repeat="x in countryArray | orderBy:wtrOrderBy">
<td>{ {x.capital} } </td>
<td>{ {x.country} } </td>
   </tr>
 </table>

Please note the “orderByObject” was written in above scope

$scope.orderByObject = function (x) {
                    $scope.wtrOrderBy = x;
                }

Hope you have learned how to use filters in Angular application

Angular Js | JavaScript Course

AngularJS Filter Service

Learn Angular JS: JavaScript framework for single page application.

JavaScript Framework

Learn JavaScript Programming

Learn ES6 or Ecma Script

Learn TypeScript Programming

Node Programming Tutorial

Learn JQuery Coding

Angular JS Examples | Join Asp.Net MVC Course