Angularjs Examples

AJS Examples


AngularJS $filter Service

The AngularJS $filter service is used for formatting data displayed to the user. The $filter service works with AngularJS built in filter like uppercase, lowercase, currency, orderby etc. It can be used with custom filter also.

Syntax

$filter('uppercase')($scope.name);
$filter('currency')($scope.salary);

AngularJS $filter Service Example

<!DOCTYPE html>  
<html>  
<head> <!-- www.techstrikers.com -->  
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>   
    <meta charset="utf-8">  
    <title>AngularJS $filter Example</title>  
  <script>  
var app = angular.module('app', []);  
    app.controller("FilterController", function ($scope,$filter) {  
      $scope.name = '';
      $scope.salary = 0;
      $scope.UppercaseFilter = function()  
      {  
        $scope.name = $filter('uppercase')($scope.name);  
        
      }  
      $scope.CurrencyFilter = function()  
      {  
         $scope.salary = $filter('currency')($scope.salary);       
      }  
    });  
</script>  
</head>  
<body style="background-color:#DDE4E9;">  
  <fieldset style="background-color:#DDE4E9;">              
    <legend>AngulerJS $filter Service Example</legend>   
  <div ng-app="app">        
    <div ng-controller="FilterController">   
      Enter Name (in small):          
        <input type="string" ng-model="name">          
        <button ng-click="UppercaseFilter()">Uppercase Filter</button></br>       
      Enter Salary:        
        <input type="string" ng-model="salary">          
        <button ng-click="CurrencyFilter()">Currency Filter</button> </br>       
      
    </div>        
</div>  
 </fieldset>   
</body>  
</html>  
See Live Example