How to use Filter in Controller with Example

       Understanding of Filters in AngularJS is quite tough and that too use of Filter in Controller using AngularJS is quite confusing work for beginners. Before starting to explore about How to use Filter in Controller, if you are a new to AngularJS filters, you can read my previous post regarding “How to Create Custom Filters in AngularJS“, this will tell you about What is Filters? and How write simple Custom Filters?. Now Let’s see how to write Filters in controller.

We can use a filter in a Controller by injecting $filter. The syntax looks like


function myCtrler($scope, $filter)
{
    ...
    $filter('filterName')(comma separated filter arguments);
    ...
};

Here we gonna see two types (actually not types, may be different ways) of filters with Example.

Built-in Filters

Let’s create our app called myApp and the controller is MyCtrler. Here i’m going to use built-in filters like uppercase, lowecase and currency which are all called as formatting filters.


var app = angular.module('myApp',[]);
myApp.controller("MyCtrler", function ($scope, $filter) {
    $scope.filteredFirstName = $filter('uppercase')('Abhijit');
    $scope.filteredLastName = $filter('lowercase')('Paul');
    $scope.filteredValueCurrency = $filter('currency')('45050');
});

 

and the HTML will be,


<body ng-app="myApp">
<div ng-controller="MyCtrler">
    <span>
        Name - {{filteredFirstName}} {{filteredLastName}} 
        Prize Money : {{filtered ValueCurrency}} 
    </span> 
</div>
</body>

So above we can see that I have used three predefined filters (uppercase, lowercase, currency) and assigned the filtered values in new properties of $scope and later used it in view.

 

Custom Filters

Now we gonna create custom filter in controller with an example, in which we gonna filter only alphabet from a array of values combined of special characters and alphabets.

Below is our controller,

myApp.controller("MyCtrler", function ($scope, $filter) {
    var textValues = ['ab$h#cde&amp;fg@', 'ba$h#dcj&amp;fe@k#', 'ab$hm*hdp&amp;ef@', 'ab$h#cdj&amp;hg$ed@'];
    // Filter applied on array of items
    $scope.filteredTextValues = $filter('RemoveSpecialCharacters')(textValues);
});

 

Here our Filter name is RemoveSpecialCharacters, below is our Filter method in Controller,


myApp.filter('RemoveSpecialCharacters', function () {
    return function (items) {
        var filtered = [];
        for (var i = 0; i &lt; items.length; i++) {
            var item = items[i];
            filtered.push(item.replace(/[^\w\s]/gi, ''));
        }
        return filtered;
    };
});

 

We are done with custom filters inside controller. You can check with my another post regarding Writting Multiple Filters in Controller.


4 thoughts on “How to use Filter in Controller with Example

  1. Thanks for sharing excellent informations. Your web-site is very cool. I am impressed by the details that youˇve on this blog. It reveals how nicely you perceive this subject. Bookmarked this web page, will come back for extra articles. You, my pal, ROCK! I found just the information I already searched all over the place and just could not come across. What a great website.

  2. I would like to express some appreciation to the writer just for bailing me out of this challenge. As a result of checking throughout the world-wide-web and finding concepts which were not helpful, I figured my entire life was gone. Living minus the approaches to the issues you’ve fixed through your write-up is a serious case, as well as the kind which could have badly affected my entire career if I had not come across your blog post. Your main competence and kindness in controlling the whole lot was valuable. I don’t know what I would have done if I had not discovered such a solution like this. I am able to at this point relish my future. Thanks for your time so much for the high quality and effective help. I won’t be reluctant to endorse the sites to anybody who should have recommendations on this issue.

Leave a Reply

Your email address will not be published.