<!DOCTYPE html>
<html>
<head>
<title>AngularJS Custom Filters Tutorial</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="app.js"></script>
<style type="text/css">
h1,
h3 {
color: #fff;
background: #000;
padding: 15px 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- Main Content -->
<div class="container" ng-app="demoLearningTurn">
<div class="content" ng-controller="mainCtrl">
<h1>Single Value Filter</h1>
<p>Enter Full Name:
<input type="text" ng-model="fullName">
</p>
<p>{{ fullName | shortname: 'C' }}</p>
<p>{{ fullName | shortname: 'S' }}</p>
<h1>Array Value Filter</h1>
<p>Give minimum employee salary</p>
<input type="number" ng-model="minSalary">
<p>Give minimum age</p>
<input type="number" ng-model="minAge">
<h3>Employee List</h3>
<table class="table">
<tr>
<td>Full Name</td>
<td>Gender</td>
<td>Email</td>
<td>Phone</td>
<td>Age</td>
<td>Salary</td>
</tr>
<tr ng-repeat="employee in employees | findEmployee : minSalary : minAge">
<td>{{ employee.full_name }}</td>
<td>{{ employee.gender }}</td>
<td>{{ employee.email }}</td>
<td>{{ employee.phone }}</td>
<td>{{ employee.age }}</td>
<td>{{ employee.salary }}</td>
</tr>
</table>
</div>
<br/>
<br/>
<br/>
<p style="text-align:center">Read Full Tutorial:
<a href="http://learningturn.com/angular-js/building-angularjs-custom-filters-tutorial/">Building AngularJS Custom Filters Tutorial | AngularJS Filters
</a></p>
<br/>
<br/>
<br/>
</div>
</body>
</html>
// Create AngularJS application
var app = angular.module('demoLearningTurn',[]);
// Create Controller with name mainCtrl
app.controller('mainCtrl', function($scope){
// full name as scope variable
$scope.fullName = 'banu musa';
// Employees record List
$scope.employees = [
{
"age": 40,
"full_name": "Page Cabrera",
"gender": "male",
"company": "IMKAN",
"email": "pagecabrera@imkan.com",
"phone": "+1 (866) 599-2376",
"salary": 4227
},
{
"age": 21,
"full_name": "Macdonald Rosales",
"gender": "male",
"company": "AFFLUEX",
"email": "macdonaldrosales@affluex.com",
"phone": "+1 (937) 475-3021",
"salary": 8878
},
{
"age": 31,
"full_name": "Cash Marsh",
"gender": "male",
"company": "REMOLD",
"email": "cashmarsh@remold.com",
"phone": "+1 (853) 465-3183",
"salary": 9686
},
{
"age": 39,
"full_name": "Ofelia Cooley",
"gender": "female",
"company": "GEEKETRON",
"email": "ofeliacooley@geeketron.com",
"phone": "+1 (919) 411-3526",
"salary": 9321
},
{
"age": 21,
"full_name": "Erma Chase",
"gender": "female",
"company": "MEGALL",
"email": "ermachase@megall.com",
"phone": "+1 (990) 459-3042",
"salary": 8145
},
{
"age": 33,
"full_name": "Maryanne Mullins",
"gender": "female",
"company": "OLUCORE",
"email": "maryannemullins@olucore.com",
"phone": "+1 (945) 547-2518",
"salary": 9564
},
{
"age": 21,
"full_name": "Christina Dickerson",
"gender": "female",
"company": "HALAP",
"email": "christinadickerson@halap.com",
"phone": "+1 (823) 481-2864",
"salary": 7966
}
];
});
app.filter('findEmployee', function(){
// pass employees recored to function and return output
return function (records, minSalary, minAage) {
// check if employees array did not have any record
if(!records){
return;
}
// check if minSalary is not define
// if minSalary is not define then consider it as 0
if(!minSalary){
minSalary = 0;
}
// check if minAage is not define
// if minAage is not define then consider it as 0
if(!minAage){
minAage = 0;
}
// declear output array
var output = [];
// loop of record array
// forEach is angular function
// check if employee employee record have salary more then minSalary
// if employee salary is more then minSalary push that record to out array
// check if employee employee record have age more then minAage
// if employee age is more then minAage push that record to out array
angular.forEach(records, function(record){
if(record.salary > minSalary && record.age > minAage){
output.push(record);
}
});
// return output array as filter output
return output;
};
});
app.filter('shortname', function(){
// pass fullname to function and return output
return function (name, arg) {
// check if input name is empty then return it
if(name == ''){
return name;
}
// process name and prepare output
// split the name on base of space
var names_arr = name.split(' ');
// declear output variable
var output = [];
// loop of names_arr array
// forEach is angular function
// we are taking first character of names_arr array
// we are appending dot(.) with each character
// we are pusing characer in output array variable
angular.forEach(names_arr, function(item){
output.push(item.substring(0,1) + '.');
});
// we are making string from output array using javaScript join() function
output = output.join('');
if (arg == 'C'){
// we are converting characet to upper case using javaScript toUpperCase() function
output = output.toUpperCase();
}
else if (arg == 'S'){
// we are converting characet to lower case using javaScript toLowerCase() function
output = output.toLowerCase();
}
// we are removing last dot(.) from output string
return output.substring(0, output.length - 1);
};
});