How to use a filter in a controller?

Question

I have written a filter function which will return data based on the argument you are passing. I want the same functionality in my controller. Is it possible to reuse the filter function in a controller?

This is what I've tried so far:

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}

Baillie

better answer: #20132053 – Truong

Answer 1

Inject $filter to your controller

function myCtrl($scope, $filter)
{
}

Then wherever you want to use that filter, just use it like this:

$filter('filtername');

If you want to pass arguments to that filter, do it using separate parentheses:

function myCtrl($scope, $filter)
{
    $filter('filtername')(arg1,arg2);
}

Where arg1 is the array you want to filter on and arg2 is the object used to filter.

Plication

Sorry, Sir, I still do not understand. Could you possibly make a Jsfiddle to show how to define the filter function body and how it is inserted in HTML file? – Glutenous

@Glutenous you can use number filter like var anyNumber = $filter('number')(12.222222, 2); to get 12.22. – Weinstock

How can we inject $filter in controller of unit test cases ? – Tessatessellate

+I for answering the question... which was "How to use a filter in a controller?" – Pantia

An example with "currency" build in filter: $filter("currency")(price, "$", 2) So if you had a price = 200, that expression would return "$200.00". – Sidhu

The answer by @pkozlowski.opensource is better than this because it reduces "magic strings". One benefit - what if this was in a much more complex controller and you failed to unit test the filter being used? You wouldn't notice the error if you use $filter('filtter1') (2 t's). However, if you inject filtter1Filter Angular will complain immediately that the dependency doesn't exist. – Waits

@Waits regardless if you say $filter('filterName') or you inject into your controller via pkozlowski's filterName + 'Filter' suggestion, you will get an Uncaught Error: [$injector:unpr] Unknown provider: error. – Mattland

@Mattland only once you run that line. Injecting it directly will hit that error the moment you instantiate that dependency. Also, it's easier to mock out in unit tests 3 separately injected filters than mocking out the $filter method with a callFake method that has 3 if statements to determine which filter you're requesting in that call. While these are debatable benefits, the only benefit to $filter is fewer dependencies injected, which @pkozlowski.opensource points out is a red flag. – Waits

@Mattland Also, @BiAiB points out that using $filter "hides" dependencies, since you're essentially using a separate DI system from the main Angular one. – Waits

If you want to apply your filter to an JSON array, you can do it like so:var myArray = $filter('filtername')(myArray,myFilterArgument); – Melodee

There is NO example in the original documentation about how it is used. Thanks for that. – Vivanvivarium

This is the kind of answer that made my happy, just work out! – Softspoken

Answer 2

Answer provided by @Prashanth is correct, but there is even easier way of doing the same. Basically instead of injecting the $filter dependency and using awkward syntax of invoking it ($filter('filtername')(arg1,arg2);) one can inject dependency being: filter name plus the Filter suffix.

Taking example from the question one could write:

function myCtrl($scope, filter1Filter) { 
  filter1Filter(input, arg1);
}

It should be noted that you must append Filter to the filter name, no matter what naming convention you're using: foo is referenced by calling fooFilter
fooFilter is referenced by calling fooFilterFilter

Recruitment

For a single filter it is fine. if u want to use 10 filters then you have to inject 10 filters to your controller. – Plication

Sure.. but I'm still to find a use case where you would like to inject 10 filters to one class... Such a class would probably violate single responsibility principle... – Recruitment

Just to make clear, that this is no "awkward" JS syntax … var fooFilter = $filter('foo'); fooFilter(arg1, arg2); – Myalgia

@Myalgia Sure, but it is more verbose :-) So wither you write awkward 1-liner or use 2 lines of code. Or you just use my answer and you've got easy to read 1-liner! – Recruitment

@OZ_ what do you mean? It works minification or not. Minification has nothing to do here, see this plunk: plnkr.co/edit/1k6nJnHO8ukBWUfgAyQw?p=preview – Recruitment

Higher order function syntax, $filter('filtername')(arg1,arg2), isn't awkward at all for a functional programming language like js. Instead it's quite natural. – Haye

This is ideal for using a single filter, which is the case I ran into. – Nonobservance

pkozlowski.opensource I think you misunderstood what OZ_ was saying. OZ_ was not saying that your code couldn't be made to work minified, but that, as written, your answer does not work with minification. As I am sure you know, you need to pass in the references by name using the standard way (e.g., app.controller( 'MyCtrl', [ '$scope', 'filter1Filter', function( $scope, filter1Filter ) {/*code here*/}); ) or use explicit dependency injection as in your Plunker example. I suggest to always give minification-compatible examples. Still a good tip though. – Jeraldinejeralee

+1 I think the $filter syntax hides dependencies, thus leading to less maintainable code. Injecting filters "statically" is a better choice. – Benedic

Answer 3

Using following sample code we can filter array in angular controller by name. this is based on following description. http://docs.angularjs.org/guide/filter

this.filteredArray = filterFilter(this.array, {name:'Igor'});

JS:

 angular.module('FilterInControllerModule', []).
    controller('FilterController', ['filterFilter', function(filterFilter) {
      this.array = [
        {name: 'Tobias'},
        {name: 'Jeff'},
        {name: 'Brian'},
        {name: 'Igor'},
        {name: 'James'},
        {name: 'Brad'}
      ];
      this.filteredArray = filterFilter(this.array, {name:'Igor'});
    }]);

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example96-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script>
  <script src="script.js"></script>
  

  
</head>
<body ng-app="FilterInControllerModule">
    <div ng-controller="FilterController as ctrl">
    <div>
      All entries:
      <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
    </div>
    <div>
      Filter By Name in angular controller
      <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
    </div>
  </div>
</body>
</html>

Emanuelemanuela

filterFilter(this.array, {name:'Igor'}); is filterFilter a keyword or what it automatically filtered out the data and why ['filterFilter', function(filterFilter) { defined here ! ? – Intent

A Plnkr with more examples of this technique: plnkr.co/edit/icFurX?p=preview – Donato

Very helpful. Thanks. – Viscounty

Answer 4

Here's another example of using filter in an Angular controller:

$scope.ListOfPeople = [
    { PersonID: 10, FirstName: "John", LastName: "Smith", Sex: "Male" },
    { PersonID: 11, FirstName: "James", LastName: "Last", Sex: "Male" },
    { PersonID: 12, FirstName: "Mary", LastName: "Heart", Sex: "Female" },
    { PersonID: 13, FirstName: "Sandra", LastName: "Goldsmith", Sex: "Female" },
    { PersonID: 14, FirstName: "Shaun", LastName: "Sheep", Sex: "Male" },
    { PersonID: 15, FirstName: "Nicola", LastName: "Smith", Sex: "Male" }
];

$scope.ListOfWomen = $scope.ListOfPeople.filter(function (person) {
    return (person.Sex == "Female");
});

//  This will display "There are 2 women in our list."
prompt("", "There are " + $scope.ListOfWomen.length + " women in our list.");

Simple, hey ?

Hodgkins

This is exactly what I needed, thanks. Though apparently this is not what the question is about. :) – Kester

Answer 5

There are three possible ways to do this.

Let's assume you have the following simple filter, which converts a string to uppercase, with a parameter for the first character only.

app.filter('uppercase', function() {
    return function(string, firstCharOnly) {
        return (!firstCharOnly)
            ? string.toUpperCase()
            : string.charAt(0).toUpperCase() + string.slice(1);
    }
});

---

Directly through $filter

app.controller('MyController', function($filter) {

    // HELLO
    var text = $filter('uppercase')('hello');

    // Hello
    var text = $filter('uppercase')('hello', true);

});

Note: this gives you access to all your filters.

---

Assign $filter to a variable

This option allows you to use the $filter like a function.

app.controller('MyController', function($filter) {

    var uppercaseFilter = $filter('uppercase');

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});

---

Load only a specific Filter

You can load only a specific filter by appending the filter name with Filter.

app.controller('MyController', function(uppercaseFilter) {

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});

---

Which one you use comes to personal preference, but I recommend using the third, because it's the most readable option.

Conners

Answer 6

function ngController($scope,$filter){
    $scope.name = "aaaa";
    $scope.age = "32";

     $scope.result = function(){
        return $filter('lowercase')($scope.name);
    };
}

The controller method 2nd argument name should be "$filter" then only the filter functionality will work with this example. In this example i have used the "lowercase" Filter.

Arteriovenous

Answer 7

I have another example, that I made for my process:

I get an Array with value-Description like this

states = [{
    status: '1',
    desc: '\u2713'
}, {
    status: '2',
    desc: '\u271B'
}]

in my Filters.js:

.filter('getState', function () {
    return function (input, states) {
        //console.log(states);
        for (var i = 0; i < states.length; i++) {
            //console.log(states[i]);
            if (states[i].status == input) {
                return states[i].desc;
            }
        }
        return '\u2718';
    };
})

Then, a test var (controller):

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}

Austronesia

Will this work in angularjs 1.0.8?? coz its not working for me..says $filter is not defined even after I added that in controller – Spiffing

Answer 8

AngularJs lets you to use filters inside template or inside Controller, Directive etc..

in template you can use this syntax

{{ variable | MyFilter: ... : ... }}

and inside controller you can use injecting the $filter service

angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
    $filter('MyFilter')(arg1, arg2);
})

If you need more with Demo example here is a link

AngularJs filter examples and demo

Accelerando

inceting is not a word. Do you mean injecting? – Kyser

oops.yea I mean injecting. – Accelerando

Answer 9

There is another way to evaluate filters that mirrors the syntax from the views. The invocation is hairy but you could build a shortcut to it. I like that the syntax of the string is identical to what you'd have in a view. Looks like this:

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}

Jephum

That actually is very useful! – Kleeman

this is fantastic as it allows me to pass a string that looks just like it would in the markup. – Kyser

Answer 10

It seems nobody has mentioned that you can use a function as arg2 in $filter('filtername')(arg1,arg2);

For example:

$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});

Megen

Answer 11

Simple date example using $filter in a controller would be:

var myDate = new Date();
$scope.dateAsString = $filter('date')(myDate, "yyyy-MM-dd"); 

As explained here - https://mcmap.net/q/64945/-angularjs-convert-dates-in-controller

Rosalinarosalind

Answer 12

Use below code if we want to add multiple conditions, instead of single value in javascript angular filter:

var modifiedArray = $filter('filter')(array,function(item){return (item.ColumnName == 'Value1' || item.ColumnName == 'Value2');},true)

Venessavenetia

Answer 13

First of all inject $filter to your controller, making sure ngSanitize is loaded within your app, later within the controller usage is as follows:

$filter('linky')(text, target, attributes)

Always check out the angularjs docs

Rositaroskes

Answer 14

if you want to filter object in controller try this

var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
                        if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
                        return obj;
                });

This will return filtered object according to if condition

Keldah

Answer 15

Reusing An Angular.js Filter - View / Controller

This Solution is covering reusing Angular Filters. Which is yet another way to filter data, and Google landed me here when I needed such; and I like to share.

Use Case

If you are already filtering, say in an ng-repeat in your view (as below), then you might have defined a filter in the controller as further follows. And then you can reuse as in the final examples.

Filter Use Example - Filtered Repeat in View

<div ng-app="someApp" ng-controller="someController">
    <h2>Duplicates</h2>
    <table class="table table-striped table-light table-bordered-light">
        <thead>
            <tr>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="person in data | filter: searchDuplicate:true">
                <td>{{person.name}}</td>
                <td>{{person.gender}}</td>
            </tr>
        </tbody>
    </table>
</div>

Angular Filter Definition Example

angular.module('someApp',[])
.controller('someController', function($scope, $filter ) {

    $scope.people = [{name: 'Bob', gender: 'male'  , hasDuplicate: true },
                     {name: 'Bob', gender: 'male'  , hasDuplicate: true },
                     {name: 'Bob', gender: 'female', hasDuplicate: false}];

    $scope.searchDuplicate = { hasDuplicate : true };
})

So, the concept here is that you are already using a filter created for your view, and then realize you would like to use it in your controller also.

Filter Function Use Within Controller Example 1

var dup = $filter('filter')($scope.people, $scope.searchDuplicate, true)

Filter Function Use Within Controller Example 2

Show a Button only if no duplicates are found, using the prior filter.

Html Button

<div ng-if="showButton()"><button class="btn btn-primary" ng-click="doSomething();"></button></div>

Show/Hide Button

$scope.doSomething = function(){ /* ... */ };
$scope.showButton = function(){ return $filter('filter')($scope.people, $scope.searchDuplicate, true).length == 0; };

Some may find this version of filtering easy, and it is an Angular.js option.

The optional comparator parameter "true" used in the view and in the $filter function call specifies you want a strict comparison. If you omit, values can be searched for over multiple columns.

https://docs.angularjs.org/api/ng/filter/filter

Pargeting