How to make a custom filter in AngularJS ?

AngularJS is a great open-source JavaScript Framework maintained by Google. This framework has got some compelling features. Filters is one of them for formatting the data in users locale. So we’ve decided to write a simple custom angular filter to sort clients table filtered by company.

At first, we initialize our main angular module which invoke the root element of our application.
[cc lang=”javascript”]
var App = angular.module(‘clientApp’, [‘ngResource’,’App.filters’]);
[/cc]
ClientCtrl is our main angular controller and some random default $scope data models are companyList & clients. (‘scope’ is another angular component which glue data model between the view and the controller).
[cc lang=”javascript”]
$scope.companyList = [{
id: 1,
name: ‘Apple’
}, {
id: 2,
name: ‘Facebook’
}, {
id: 3,
name: ‘Google’
}];

$scope.clients = [{
name: ‘Brett’,
designation: ‘Software Engineer’,
company: {
id: 1,
name: ‘Apple’
}
}, {
name: ‘Steven’,
designation: ‘Database Administrator’,
company: {
id: 3,
name: ‘Google’
}
}, {
name: ‘Jim’,
designation: ‘Designer’,
company: {
id: 2,
name: ‘Facebook’
}
}, {
name: ‘Michael’,
designation: ‘Front-End Developer’,
company: {
id: 1,
name: ‘Apple’
}
}, {
name: ‘Josh’,
designation: ‘Network Engineer’,
company: {
id: 3,
name: ‘Google’
}
}, {
name: ‘Ellie’,
designation: ‘Internet Marketing Engineer’,
company: {
id: 1,
name: ‘Apple’
}
}];
[/cc]
We have generate the company options list dynamically from $scope.companyList, in a button group named Filter by Company, for selecting multiple company to filter the clients table.
[cc lang=”html”]

[/cc]
Every selected company’s id is stored in an array $scope.selectedCompany.
[cc lang=”javascript”]
$scope.setSelectedClient = function () {
var id = this.company.id;
if (_.contains($scope.selectedCompany, id)) {
$scope.selectedCompany = _.without($scope.selectedCompany, id);
} else {
$scope.selectedCompany.push(id);
}
return false;
};
[/cc]
Now its time to filter the clients table based on selected companies id. So we’ve created a custom filter name companyFilter. Its dependency is already injected in main app angular module.
[cc lang=”javascript”]
angular.module(‘App.filters’, []).filter(‘companyFilter’, [function () {
return function (clients, selectedCompany) {
if (!angular.isUndefined(clients) && !angular.isUndefined(selectedCompany) && selectedCompany.length > 0) {
var tempClients = [];
angular.forEach(selectedCompany, function (id) {
angular.forEach(clients, function (client) {
if (angular.equals(client.company.id, id)) {
tempClients.push(client);
}
});
});
return tempClients;
} else {
return clients;
}
};
}]);
[/cc]
We have passed the clients & selectedCompany array to the companyFilter at the time of generating the clients table row.
[cc lang=”html”]

Questions, comments, suggestions, improvements – all cordially welcome.