In the previous post we have learnt anatomy of an AngularJS filter and how to use AngularJS’ inbuilt filters. In this post lets understand how to create custom filters.
As part of this post, we will be creating three custom filters.
- Ellipsis Filter : Applying this filter on a string would return us a shortened string (word wise) with ellipsis at the end. We can also pass a number that would decide length of the shortened string.
- Capitalize Filter: Lets create this filter with a twist. If we apply this filter that takes an optional parameter, it would capitalize the character corresponding to the parameter in a given input string.
- Array Filter: This filter would take an array and filter the data based on the second parameter. For the purpose of this example, we would have an array of employee names and their status. One could filter that array based on the status of an employee.
Ellipsis Filter
When developing applications like Content Management Systems, we often come across scenarios where we may want to display just a part of string and allow the user to click on “More” so we can take them to the detailed page. Ellipsis filter can be handy for such scenarios.
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | app.filter('ellipsis', function () { return function (value, wordwise, max, tail) { if (!value) return ''; max = parseInt(max, 10); if (!max) return value; if (value.length <= max) return value; value = value.substr(0, max); if (wordwise) { var lastspace = value.lastIndexOf(' '); if (lastspace != -1) { value = value.substr(0, lastspace); } } return value + (tail || ' …'); }; }); |
In the above code, we are first checking to see if the passed value is true. If not, we are just returning it back unchanged. Note the other three parameters that we are passing:
- wordwise is a Boolean value tells us if we need to shorten the string word wise.
- max is a number that tells us the number of words to limit the string to.
- tail gives us the string to be concatenated at the tail end of the string.
The following code shows how to apply this filter in your controller.
In Controller
1 | var description = $filter('ellipsis')('Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s', true, 80, '...'); |
In View
1 | {{ 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s' | ellipsis:true:25:'...' }} |
As you can see, you can pass multiple parameters in the view by using a colon (“:”).
Capitalize Filter
JavaScript
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 | app.filter('capitalize', function() { //The additional parameter will specify which letter to capitalize, if no additional parameter is passed than the first letter will be capitalized. // Create the return function and set the required parameter as well as an optional paramater return function(input, char) { if (isNaN(input)) { // If the input data is not a number, perform the operations to capitalize the correct letter. var char = char - 1 || 0; var letter = input.charAt(char).toUpperCase(); var out = []; for (var i = 0; i < input.length; i++) { if (i == char) { out.push(letter); } else { out.push(input[i]); } } return out.join(''); } else { return input; } } }); |
As you can notice in the above code, Capitalize filter takes two parameters, input and char. The idea here is to capitalize the character of the input based on the index number provided in the char parameter.
We first check to see if the input is a string and then loop through the characters of the input string to capitalize the correct character. The following code shows how to use this filter in a controller and in a view.
In Controller
1 | $scope.capString = $filter('capitalize')('geekhours',4); |
In View
1 | {{ 'geekhours' | capitalize:3 }} |
Array Filter
1 2 3 4 5 6 7 8 9 10 11 | app.filter('employeestatus', function () { return function (input, employees) { var filteredemployees = []; for (var i = 0; i < employees.length; i++) { if (employees[i].status == input) { filteredemployees.push(employees[i]); } } return filteredemployees; }; }) |
In Controller
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $scope.employees = [{ name: 'Ajay', status: 'active' }, { name: 'John', status: 'active' }, { name: 'Jane', status: 'inactive' }, { name: 'Janet', status: 'active' }, { name: 'Russel', status: 'inactive' }] $scope.filteredEmployees = $filter('employeestatus')('active',$scope.employees); |
For this filter we have initialized an array employees with some values and then applied the filter on this array. The returned array is saved into filteredEmployees. This filter takes status as a parameter and returns all the employees with the provided status.
The following link takes you to a Plunker that has all the three examples : http://plnkr.co/edit/6eZt1K?p=preview
