How to use a filter in a controller?

AngularjsAngular FiltersNg Controller

Angularjs Problem Overview

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.
}

Angularjs Solutions

Solution 1 - Angularjs

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.

Solution 2 - Angularjs

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

Solution 3 - Angularjs

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>

Solution 4 - Angularjs

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 ?

Solution 5 - Angularjs

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.

Solution 6 - Angularjs

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.

Solution 7 - Angularjs

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);
    // ....
}

Solution 8 - Angularjs

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

Solution 9 - Angularjs

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." ))
}

Solution 10 - Angularjs

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;});

Solution 11 - Angularjs

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://stackoverflow.com/a/20131782/262140

Solution 12 - Angularjs

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)

Solution 13 - Angularjs

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

Solution 14 - Angularjs

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

Solution 15 - Angularjs

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

Categories
Recommended Angularjs Solutions
Recommended Angular Filters Solutions
Recommended Ng Controller Solutions

Previous Solution:

Bootstrap modal appearing under background

JavascriptCssTwitter BootstrapModal Dialog

Next Solution:

How can I see normal print output created during pytest run?

PythonLoggingOutputPytest

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionsumanthView Question on Stackoverflow
Solution 1 - AngularjsJSAddictView Answer on Stackoverflow
Solution 2 - Angularjspkozlowski.opensourceView Answer on Stackoverflow
Solution 3 - Angularjsaamir sajjadView Answer on Stackoverflow
Solution 4 - AngularjsMike GledhillView Answer on Stackoverflow
Solution 5 - AngularjsJeffrey RoosendaalView Answer on Stackoverflow
Solution 6 - AngularjsIpogView Answer on Stackoverflow
Solution 7 - AngularjsNtSpeedView Answer on Stackoverflow
Solution 8 - AngularjsHazarapet TunanyanView Answer on Stackoverflow
Solution 9 - AngularjsSimplGyView Answer on Stackoverflow
Solution 10 - AngularjspavokView Answer on Stackoverflow
Solution 11 - AngularjsAVHView Answer on Stackoverflow
Solution 12 - AngularjsAmay KulkarniView Answer on Stackoverflow
Solution 13 - AngularjssedView Answer on Stackoverflow
Solution 14 - AngularjsCode SpyView Answer on Stackoverflow
Solution 15 - AngularjsGregView Answer on Stackoverflow