Angularjs Examples

AJS Examples


AngularJS Create Custom Filter Using Filter Method

In this AngularJS custom filter example you will learn how to create custom filter in angularjs 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 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('displayGender',function(){  
    return function(value){   
        if(value == 1)
			return 'Male';
		else if(value == 2)
			return 'Female'
		else
			return 'Not disclosed';
    };  
}); 
    app.controller("ParentController", function ($scope) {        
    $scope.employees = [{      
        firstName:"jimi",      
        lastName:"Scott",      
        jobTitle:"Developer", 
        gender: 1,
        salary:20000,      
        phone:"345-333-7845"      
      },      
      {      
          firstName:"Bailey",      
          lastName:"Lee",      
          jobTitle:"Lead", 
          gender: 2,
          salary:30000,      
          phone:"322-121-213"      
      },      
      {      
          firstName:"Aura",      
          lastName:"Martin",
          gender: 2,
          jobTitle:"QA",      
          salary:35000,      
          phone:"322-333-0987"      
      },      
      {      
          firstName:"Austin",      
          lastName:"Williams",      
          jobTitle:"Designer",
          gender: 1,
          salary:20000,      
          phone:"322-265-2321"      
      }];       
    });         
</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">      
        <li>Name : {{ emp.firstName + ' ' + emp.lastName}}</li>  
        <li>Job Title : {{ emp.jobTitle}}</li>
        <li>Name : {{ emp.gender | displayGender}}</li>
        <li>Salary : {{ emp.salary }}</li>      
        <li>Phone : {{ emp.phone }}</li>      
    </ul>      
  </div>        
</div>                
</div>                
 </fieldset>                 
</body>                
</html>