AngularJS - SPLessons

AngularJS Filters

Chapter 13

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

AngularJS Filters

AngularJS Filters

shape Description

AngularJS Filters allows to change the data in applications. These can be included in the Expressions and Directives by using the pipe | character.

AngularJS filters can perform three operations, they are:


Generally, filters can transform the data into new datatype while processing. In this tutorial, AngularJS Filters tutorial, various types of filters and their syntax are discussed.

shape Syntax

Filters are used with binding expression or a directive. The general syntax of filters is:

{{ expression | filter:itemFilter }}

When more than one filter is used in an expression, that filter is known as the Chaining Filter.

{{ expression | filter:itemFilter | filter:itemFilter }}

In above syntax, | filter: part tells the AngularJS to apply filter on expression data.

itemFilteris the name of filter function.

Filter Functions

AngularJS has a set of built-in filter functions and are categorized into various types, such as:

Filter Description
currency This filter converts a number to currency format.
lowercase This filter formats all characters of a string to lowercase.
uppercase This filter formats all the characters of a string to uppercase.
date This filter formats the string to the requested format.
limitTo This filter limits an array/string to required no. of elements/characters.
json This filter formats an object to JSON string.
orderBy Orders an array by an expression.

Uppercase Filter

shape Example

Converts the text into uppercase.
index.html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="App.js"></script>
    <script src="Controller.js"></script>
    <title>AngularJS Filter:Uppercase</title>
  </head>

  <body ng-app="spApp">
    <h1>AngularJS Filter:Uppercase</h1>
    <div ng-controller="SPController">Name:
            <input type="text" ng-model="name" />
      <br />
      <p>The name is {{ name | uppercase }}</p>
    </div>
  </body>

</html>

Controller.js

var controller = MyApp.controller("SPController", function($scope) {
       $scope.name="Mike Hussey"
  });

App.js

var MyApp = angular.module('spApp', []);

Output:

Lowercase

shape Example

Converts the characters into lowercase.

index.html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="App.js"></script>
    <script src="Controller.js"></script>
    <title>AngularJS Filter:Lowercase</title>
  </head>

  <body ng-app="spApp">
    <h1>AngularJS Filter:Lowercase</h1>
    <div ng-controller="SPController">Name:
                <input type="text" ng-model="name" />
      <br />
      <p>The name is {{ name | lowercase }}</p>
    </div>
  </body>

</html>


Controller.js

var controller = MyApp.controller("SPController", function($scope) {
       $scope.name="GRAME SMITH"
  });

Output:

Currency

shape Description

Converts the text into currency format. Local currency format is used by default by this filter.

Syntax:

{{ number | currency : symbol : fractionsize }}

shape Example


index.html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="App.js"></script>
    <script src="Controller.js"></script>
    <title>AngularJS Filter:Currencey</title>
  </head>

  <body ng-app="spApp">
    <h1>AngularJS Filter:Currencey</h1>
    <div ng-controller="SPController">
  
      Quantity: <input type="number" ng-model="quantity" />

      Price:    <input type="number" ng-model="price" />
      <p>Total = {{ (quantity * price) | currency }}</p>
    </div>
  </body>

</html>

Controller.js

var controller = MyApp.controller("SPController", function($scope) {
      $scope.quantity = 1;
      $scope.price = 9.99;
  });

Output:

Filter

shape Description

Selects subset of items from an array. The filter filter allows applying filter only on arrays, and returns only the matched items in the form of arrays.

Syntax:

{{ arrayexpression | filter : expression : comparator }}

shape Example

<ul>
	 <li ng-repeat="user in users | filter:test ">	 	 
	 {{ (user.name | uppercase) + ', ' + user.age }}	 	
	 </li>	 	
</ul>	 

Order by

shape Example

It arranges the array based on provided expression.

shape Example


index.html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="App.js"></script>
    <script src="Controller.js"></script>
    <title>AngularJS Filter:Input Filter</title>
  </head>

  <body ng-app="spApp">
    <h1>AngularJS Filter:Input Filter</h1>
    <div ng-controller="SPController">
      <p>Filtering input:</p>
      <p>
        <input type="text" ng-model="test" />
      </p>
      <ul>
        <li ng-repeat="user in users | filter:test | orderBy:'age'">
          {{ (user.name | uppercase) + ', ' + user.age }}
        </li>
      </ul>
    </div>
  </body>

</html>


Controller.js

var controller = myApp.controller("SPController", function($scope) {
    $scope.users = [
          {name:'John',age:23},
              {name:'James',age:24},
          {name:'Jaffer',age:26},
   ];
 });

Output:

Summary

shape Key Points

  • AngularJS Filter allows to change the data in applications.
  • Filters are used with binding expression or a directive.
  • Currency, filter, orderBy, uppercase, and lowecase are some filters of AngularJS.