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.
1 | var App = angular.module('clientApp', ['ngResource','App.filters']); |
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).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | $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' } }]; |
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.
1 2 3 4 5 6 7 8 9 10 11 | <div class="btn-group" data-ng-class="{open: open}"> <button class="btn">Filter by Company</button> <button class="btn dropdown-toggle" data-ng-click="open=!open"><span class="caret"></span></button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu"> <li><a data-ng-click="checkAll()"><i class="icon-ok-sign"></i> Check All</a></li> <li><a data-ng-click="selectedCompany=[];"><i class="icon-remove-sign"></i> Uncheck All</a></li> <li class="divider"></li> <li data-ng-repeat="company in companyList"> <a data-ng-click="setSelectedClient()">{{company.name}} <span data-ng-class="isChecked(company.id)"></span></a></li> </ul> </div> |
Every selected company’s id is stored in an array $scope.selectedCompany.
1 2 3 4 5 6 7 8 9 | $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; }; |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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; } }; }]); |
We have passed the clients & selectedCompany array to the companyFilter at the time of generating the clients table row.
1 | <tr data-ng-repeat="client in filtered = (clients | companyFilter:selectedCompany)"> |
That’s a simple custom angular filter with a screenshot below:
Questions, comments, suggestions, improvements – all cordially welcome.
