Google+

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:

AngularFilter

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


Post Meta

Comment(s):
0
Posted on:
February 26, 2013
Category:
AngularJS, JS
Tags:
, ,