AngularJS Filters Example Tutorial

Filed Under: AngularJS

We looked at View Model, View and Controller concepts in the previous post. Now we are going to discuss about the AngularJS Filters.

Contents

AngularJS Filter Concepts

Filters are used to format the value of an expression for display to the user. They can be added to templates, controllers, directives or services and you can also define your own filters. Using filters, Angular lets you organize data, so that it only displays data if it meets certain criteria.

We use pipe ( | ) character to add angular filters. We will see the use of filters in the Angular Filters in Action section.

The following table briefly describes the commonly used Angular Filters.

Angular Filter Description
filter Selects a subset of items from an array and returns it as a new array.
currency Formats a number to currency format
number Used to format a number.
date Formats date to a string based on the requested format.
json convert JavaScript object to JSON
lowercase Converts a string to lowercase.
uppercase converts a string to uppercase
limitTo Creates a new array or string containing only a specified number of elements.
orderBy Orders an array by the expression.

AngularJS Filters in Action

We will see the use of Angular filters in this section.

Uppercase and Lowercase

The following example demonstrates the use of uppercase and lowercase filters in AngularJS.

filter-case.html


<!DOCTYPE html>
<html>

<head>
<title> Filter - Uppercase and Lowercase</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-controller="BlogController">

    Name: <input type="text" ng-model="name"><br>
    Blog Name: <input type="text" ng-model="blogName"><br>
    <br>
    Name: {{name | uppercase}}
    <br>
    Blog Name : {{blogName | lowercase}}

</div>

<script src="blogController.js"></script>

</body>
</html>

The following Controller is used in this example. We set the initial state of the scope by attaching the properties with upper and lowercase letters.

blogController.js


function BlogController($scope) {
        $scope.name = "pankaj kumar",
        $scope.blogName = "JOURNAL DEV"
}

Currency

The following example demonstrates the use of currency filter in AngularJS.

filter-currency.html


<!DOCTYPE html>
<html ng-app>

<head>
<title> Angular Filter - Currency</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

   <div ng-controller="currencyController">

      Quantity: <input type="number" ng-model="quantity">
      Price: <input type="number" ng-model="price">

      <p> Toal Default = {{ (quantity * price) | currency }}</p>
      <p>Total in INR = {{ (quantity * price) | currency :"INR " }}</p>

   </div>

<script src="currencyController.js"></script>

</body>
</html>

The following Controller is used in this example. We set the initial state of the scope by attaching the properties quantity and price with values 1 and 10 respectively.

currencyController.js


function currencyController($scope) {
    $scope.quantity = 1;
    $scope.price = 10;
}

You will see the following output in your browser. The default currency format is in USD($).

Using orderby and filter

The following example demonstrates the use of angular filters like orderby and filter. We use orderby filter to order the players array by the given expression. In this example, we use name to order the players array. It is ordered alphabetically for strings and numerically for numbers.
We use filter to select a subset of items from players array of objects and returns a new array which matches the filter expression. In this example you can see how filter works as you type.

filter-orderby.html


<!DOCTYPE html>
<html ng-app="">

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-controller="playerController">

Name:<input type='text' ng-model='filterName'/>
<ul>
  <li ng-repeat="player in players |filter:filterName | orderBy:'name'">
    {{ player.name + ' : ' + player.country }}
  </li>
</ul>

</div>

<script src="playerController.js"></script>

</body>
</html>

We use the following controller in the above example.

playerController.js


function playerController($scope) {
        $scope.players = [ {name:'Elano Blumer',country:'Brazil'},
			{name:'David James',country:'England'},
			{name:'Iain Hume',country:'Canada'}
                       ];
    }

You will see the following output in your browser. You can type in the input field to filter the list.

Using limitTo

We use limitTo filter to create a new array or string containing only a specified number of elements. The following example demonstrates the use of limitTo filter

filter-limit.html


<!DOCTYPE html>
<html  ng-app>
<head>
<title>Angular Filter - limiTo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>

</head>
<body>

  <div ng-controller="limitController">

    Defined Array of Numbers: {{numbers}}<br>
    <br>Limit  to:
    <input type="integer" ng-model="limit">

    <p>Array after limiting to {{limit}} numbers : {{ numbers | limitTo:limit }}</p>
      <p>{{xss}}</p>

  </div>

</body>
<script src="limitController.js"></script>
</html>

We use the following controller in our example.

limitController.js


function limitController($scope) {
       $scope.numbers = [10,20,30,40,50,60,70,80,90,100];
       $scope.limit = 5;
}

You will see the following output in your browser.

You can try using the Angular Filters alone or in combinations depending on your requirements. That’s all for AngularJS filters and you will see more angular features in the coming posts.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages