AngularJS $Filter Service Examples

$filter is service used to format to the data to display at user inteface. In the previous tutorial, we have seen the filters used in  angular expressions to format the data. In this tutorial we will see using $filter service in javascript.

$Filter Syntax in Javascript:

  • $filter(‘currency’)(amount, symbol, fractionSize)
  •        $filter(‘uppercase’)(variable)
  •       $filter(‘lowercase’)(variable)
  • $filter(‘number’)(number, fractionSize)
  •                $filter(‘json’)(object, spacing)
  •             $filter(‘limitTo’)(input, limit, begin)
  • $filter(‘orderBy’)(collection, expression, reverse, comparator)
  • $filter(‘date’)(date, format, timezone)
  • $filter(‘filter’)(array, expression, comparator, anyPropertyKey)

 

How to Use $Filter In Javascirpt: 

  • You need to Inject the $filter into the controller or service
    • app.controller('FilterController',['$scope','$filter',function( $scope,$filter){ 
       //Use $filter as per above syntax
      })];
  • Use the $filter on model variable or variables

Date Filter Example:

$filter service will be used in JavaScript to format the date for given  specified format like shown in below examples:

var today = new Date();
$scope.fullDate= $filter('date')(today,'fullDate');
$scope.longDate= $filter('date')(today,'longDate');
$scope.mediumDate= $filter('date')(today,'mediumDate');
$scope.shortDate= $filter('date')(today,'shortDate');
$scope.shortDate= $filter('date')(today,'shortDate');
$scope.anotherDate= $filter('date')(today,'yyyy-MM-dd');

$filter filter Example:

you can use $filter service in JavaScript on JSON list or array . Lets look at employees json list and we will apply filter on this :

$scope.employees = [
 {empName: 'vijay', sex: 'M', salary: 10000},
 {empName: 'Aruna', sex: 'F', salary: 25000},
 {empName: 'Jayaram', sex: 'M', salary: 23000},
 {empName: 'john', sex: 'M', salary: 980000},
 {empName: 'Rashmi', sex: 'F', salary: 12233},
 ];
//Filers By Employee Name
$scope.filterEmployees = $filter('filter')($scope.employees ,{empName:'vijay'});
 //Filters on all JSON ID's with string 'f'
$scope.filterEmployees = $filter('filter')($scope.employees ,'f');

OrderBy Filter Example: 

OrderBy filter is used to sort the list. The default ordering is ascending order and you can use +/- to specify the ordering.In this example we will see multiple code examples on orderBy using $filter service:

$scope.employees = [
 {empName: 'vijay', sex: 'M', salary: 10000},
 {empName: 'Aruna', sex: 'F', salary: 25000},
 {empName: 'Jayaram', sex: 'M', salary: 23000},
 {empName: 'john', sex: 'M', salary: 980000},
 {empName: 'Rashmi', sex: 'F', salary: 12233},
 ];
//Orders By Salary in descending 
$scope.ordersBySalary = $filter('orderBy')($scope.employees ,'-salary');
//Orders By Salary in asc
$scope.ordersBySalary = $filter('orderBy')($scope.employees ,'+salary');
//Returns Employee by descending order
 $scope.orderEmployees = $filter('orderBy')( $scope.employees,'-empName');

AngularJS $Filter Service in Javascript Examples:

<html>
<head>
 <title>Filters - $Filter Examples</title>
</head>
<body ng-app="myApp" ng-controller="FilterController">
 
 <div class="container">
 
 <b>Uppercase Example:</b> {{UppercaseName}}<br/>
 <b>Lowercase Example:</b> {{lowerCase}}<br/>
 <b>Currency Example:</b> {{filterCurrency}}<br/>
 <b>Number Example:</b> {{filterValue}}<br/> 
 <b>Order Example: </b> {{orderEmployees}}<br/>
 <b>Filter Example: </b> {{filterEmployees}}<br/> <br/>
 <b>Date Examples: </b> {{formatDate}}<br/>
 
 FullDate: {{fullDate}}<br/>
 LongDate: {{longDate}}<br/>
 MediumDate: {{mediumDate}}<br/>
 ShortDate: {{shortDate}}<br/>
 yyyy-MM-dd: {{anotherDate}}<br/>
 Input Box: <input ng-model="anotherDate" /><br/><br/>
 <b>Limit To Example:</b> {{limitText}}<br/>
</body>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
 <script>

 var app = angular.module('myApp',[]);
 app.controller('FilterController',['$scope','$filter',function( $scope,$filter){
 var currency = 120.00;
 var value = 123002302.2222
 var hello="Hi Hello. Howz the day"
 $scope.filterCurrency = $filter('currency')(currency,'UK',1);
 $scope.UppercaseName = $filter('uppercase')(hello);
 $scope.lowerCase = $filter('lowercase')(hello);
 $scope.filterValue = $filter('number')(value,2); //converts to string upto two decimal points
 $scope.formatDate = $filter('date')(new Date(),'dd-MM-yyyy');
 $scope.numbers=[1,2,3,4,5,6,7,8,9,10];
 $scope.limitText=$filter('limitTo')("Hello,This is Jayaram",5,0);
 $scope.employees = [
 {empName: 'vijay', sex: 'M', salary: 10000},
 {empName: 'Aruna', sex: 'F', salary: 25000},
 {empName: 'Jayaram', sex: 'M', salary: 23000},
 {empName: 'john', sex: 'M', salary: 980000},
 {empName: 'Rashmi', sex: 'F', salary: 12233},
 ];
 $scope.filterEmployees = $filter('filter')($scope.employees ,{empName:'vijay'});
 $scope.orderEmployees = $filter('orderBy')( $scope.employees,'-empName');
 var today = new Date();
$scope.fullDate= $filter('date')(today,'fullDate');
$scope.longDate= $filter('date')(today,'longDate');
$scope.mediumDate= $filter('date')(today,'mediumDate');
$scope.shortDate= $filter('date')(today,'shortDate');
$scope.shortDate= $filter('date')(today,'shortDate');
$scope.anotherDate= $filter('date')(today,'yyyy-MM-dd');


 }]);
 
 </script>
</html>

Leave a Comment

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