AngularJS Create Custom Display Filter Using Filter Method

In this AngularJS custom filter example you will learn how to create custom display filter using filter method.

Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.

Syntax

var app = angular.module('app', []);
app.filter('pascalCase',function(){
	//write filter code here
});

AngularJS Create Custom Display Filter Using Filter Method 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 Create custom filter in AngularJS 
	using filter method Example</title>  
  <script>              
var app = angular.module('app', []); 
app.filter('pascalCase',function(){
	return function(value){
		var returnVal = ' ';
		var words = value.split(' ');
		words.forEach(function(item){
			if(returnVal)
				returnVal == ' ';
			else
				returnVal = '';
			returnVal += item.substr(0,1).toUpperCase() + 
			item.substr(1).toLowerCase() + ' ';
		});
	  return returnVal;
	};
});
    app.controller("ParentController", function ($scope) {      
    $scope.employees = [{    
        firstName:"jimi",    
        lastName:"scott",    
        jobTitle:"developer",    
        salary:20000,    
        phone:"345-333-7845"    
      },    
      {    
          firstName:"bailey",    
          lastName:"lee",    
          jobTitle:"lead",    
          salary:30000,    
          phone:"322-121-213"    
      },    
      {    
          firstName:"aura",    
          lastName:"martin",    
          jobTitle:"qa",    
          salary:35000,    
          phone:"322-333-0987"    
      },    
      {    
          firstName:"austin",    
          lastName:"williams",    
          jobTitle:"designer",    
          salary:20000,    
          phone:"322-265-2321"    
      }];  
      $scope.numLimit = 5;  
      $scope.numStart = 0;  
    });       
</script>              
</head>              
<body style="background-color:#DDE4E9;">              
  <fieldset style="background-color:#DDE4E9;">                          
<legend>AngulerJS Create custom filter in AngularJS using 
filter method Example</legend>       
  <div ng-app="app">       
    <div ng-controller="ParentController">    
      <ul ng-repeat="emp in employees | limitTo:numLimit:numStart">    
        <li>Name : {{ emp.firstName + ' ' + emp.lastName | pascalCase}}</li>    
        <li>Job Title : {{ emp.jobTitle | pascalCase}}</li>    
        <li>Salary : {{ emp.salary }}</li>    
        <li>Phone : {{ emp.phone }}</li>    
    </ul>    
  </div>      
</div>              
</div>              
 </fieldset>               
</body>              
</html>

See Live Example

« Previous