Step 6-AngularJS Filters

Definition – Filters are used to change the format of data.

Types of Filters –There are 9 filters in AngularJS.

  • currency
  • date
  • filter
  • json
  • limitTo
  • lowercase
  • number
  • orderBy
  • uppercase

Syntax-  data | filter

Example snippet- “abc |uppercase”

Now look on this code example- Which can be saved in html and open it on browser

<!DOCTYPE html>
<html ng-app="myApp">
  <meta charset="utf-8">
  <title>AngularJS Filters Example</title>
  <script src=""></script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $ = "John";
      $scope.amount = 1234.56;
      $ = new Date();
      $scope.names = [
        {name:'John', country:'USA'},
        {name:'Mary', country:'Canada'},
        {name:'Lucy', country:'Australia'}
<body ng-controller="myCtrl">
  <h2>AngularJS Filters Example</h2>
  <p>Original name: {{name}}</p>
  <p>Uppercase name: {{name | uppercase}}</p>
  <p>Amount: {{amount | currency}}</p>
  <p>Date: {{date | date:'MM/dd/yyyy'}}</p>
      <tr ng-repeat="person in names | orderBy:'name'">
        <td>{{ | lowercase}}</td>
        <td>{{ | uppercase}}</td>


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.