AngularJS Filters

AngularJS Filters

Part 1 - Built-in Filters

AngularJS Filter object selects a subset of items from array and returns it as a new array. Filters are easiest and busiest part of AngularJS code. Generally it is used to format a string or JavaScript objects in date, number, currency. It is also used to fetched the selected array against matched expression condition.

Syntax

  1. HTML Template
    // comparator is true or false|undefined
    {{filter_expression | filter : expression : comparator}}
  2. AngularJS code
    .controller('myController', ['$scope', '$filter', function($scope, $filter) {
      $scope.filteredString = $filter('filter')(array, expression, comparator);
    }]);

AngularJS built in filters

AngularJS provides common built-in filters includes
  • filter - Fetched a subset from given array against matched expression.
  • lowercase - Format a string to lower case.
  • uppercase - Format a string to upper case.
  • number - Format a number
  • currency - Format a currency
  • date - Format a date to a specified format.
  • limitTo - Limits an array into a specified number of elements.
  • orderBy - Re-arrange a subset by an expression.

Example

/*
app.js
filters
*/
'use strict';
angular.module('myApp', [])

.controller("filterCtrl", ['$scope', '$filter', function($scope, $filter) {
  $scope.currentDate = new Date;
  $scope.ymdDate = $filter('date')(new Date, 'yyyy-MM-dd');
  $scope.dmyDate = $filter('date')(new Date, 'dd-MMM-yyyy');
  $scope.products = [
                      {name: 'Apple', price: 14.50},
                      {name: 'Orange', price: 10.25},
                      {name: 'Banana', price: 8.10}
                    ];
}]);
<!DOCTYPE html>
<!--
index.html
built-in filters
-->
<html ng-app="myApp">
<head>
  <title>AngularJS Filters</title>

  <!-- bootsrap CDN -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
  <div class="container" ng-controller="filterCtrl">
    <h4>Built in filter examples</h4>
    <div class="row">
      <div class="col-md-6">
        <label for="name">String filter</label>
        <input type="text" class="form-control" ng-model="data.name" placeholder="Enter Name">
        <b>lowercase:</b> {{data.name | lowercase}}<br>
        <b>uppercase:</b> {{data.name | uppercase}}
      </div>
      <div class="col-md-6">
        <label for="name">Numbers &amp; Currency</label>
        <input type="number" class="form-control" ng-model="data.numbers" placeholder="Enter number">
        <b>number:</b> {{data.numbers | number:3}}<br>
        <b>currency:</b> {{data.numbers | currency}}
      </div>
    </div>
    <div class="row">
      <div class="col-md">
        <br><b>Date filters</b><br>
        <b>Current Date: {{currentDate}}</b><br>
        <b>yyyy-MM-dd:</b> {{ymdDate}}<br>
        <b>dd-MMM-yyyy:</b> {{dmyDate}}
      </div>
    </div>
    <div class="row">
      <div class="col-md">
        <br>
        <b>Products</b>
          <table class="table table-striped table-bordered bg-white">
            <tr style="">
              <th>Name</th>
              <th>Rate</th>
            </tr>
            <tr ng-repeat="product in products">
              <td>{{product.name}}</td>
              <td>{{product.price | number:2}}</td>
            </tr>
          </table>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <b>limitTo 2 filter</b>
        <table class="table table-striped table-bordered bg-white">
          <tr>
            <th>Name</th>
            <th>Rate</th>
          </tr>
          <tr ng-repeat="product in products | limitTo:2">
            <td>{{product.name}}</td>
            <td>{{product.price | number:2}}</td>
          </tr>
        </table>
      </div>
      <div class="col-md-6">
          <b>orderBy 'name' filter</b>
          <table class="table table-striped table-bordered bg-white">
            <tr>
              <th>Name</th>
              <th>Rate</th>
            </tr>
            <tr ng-repeat="product in products | orderBy:'name'">
              <td>{{product.name}}</td>
              <td>{{product.price | number:2}}</td>
            </tr>
          </table>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <b>Cheapest</b>
        <table class="table table-striped table-bordered bg-white">
          <tr>
            <th>Name</th>
            <th>Rate</th>
          </tr>
          <tr ng-repeat="product in products | orderBy:'price' | limitTo:1">
            <td>{{product.name}}</td>
            <td>{{product.price | number:2}}</td>
          </tr>
        </table>
      </div>
      <div class="col-md-6">
        <b>Costliest</b>
        <table class="table table-striped table-bordered bg-white">
          <tr>
            <th>Name</th>
            <th>Rate</th>
          </tr>
          <tr ng-repeat="product in products | orderBy:'price':true | limitTo:1">
            <td>{{product.name}}</td>
            <td>{{product.price | number:2}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>

  <!-- AngularJS CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

Built in filter examples

lowercase: {{data.name | lowercase}}
uppercase: {{data.name | uppercase}}
number: {{data.numbers | number:3}}
currency: {{data.numbers | currency}}

Date filters
Current Date: {{currentDate}}
yyyy-MM-dd: {{ymdDate}}
dd-MMM-yyyy: {{dmyDate}}

Products
Name Rate
{{product.name}} {{product.price | number:2}}
limitTo 2 filter
Name Rate
{{product.name}} {{product.price | number:2}}
orderBy 'name' filter
Name Rate
{{product.name}} {{product.price | number:2}}
Cheapest
Name Rate
{{product.name}} {{product.price | number:2}}
Costliest
Name Rate
{{product.name}} {{product.price | number:2}}