AngularJS Drop Down Filter in this example there is a list of clients who work in different roles for different companies. You can use the drop down menu to select a filter for company, which let’s you select multiple companies and adds a tick for those selected. It also has the option to check all or none in one go.
This is achieved by using a custom AngularJS filter for the company which simply goes through those you have selected and adds them to an array which is returned to the ng template. Underscore.js _.pluck function is used to check all the options. The styles for the drop down are provided by Bootstrap.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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; } }; }]); |