Passing Arguments To Angularjs Filters

Is it possible to pass an argument to the filter function so you can filter by any name? Something like $scope.weDontLike = function(item, name) { console.log(arguments);

Solution 1:

Actually there is another (maybe better solution) where you can use the angular's native 'filter' filter and still pass arguments to your custom filter.

Consider the following code:

<divng-repeat="group in groups"><ling-repeat="friend in friends | filter:weDontLike(group.enemy.name)"><span>{{friend.name}}</span><li></div>

To make this work you just define your filter as the following:

$scope.weDontLike = function(name) {
    returnfunction(friend) {
        return friend.name != name;
    }
}

As you can see here, weDontLike actually returns another function which has your parameter in its scope as well as the original item coming from the filter.

It took me 2 days to realise you can do this, haven't seen this solution anywhere yet.

Checkout Reverse polarity of an angular.js filter to see how you can use this for other useful operations with filter.

Solution 2:

From what I understand you can't pass an arguments to a filter function (when using the 'filter' filter). What you would have to do is to write a custom filter, sth like this:

.filter('weDontLike', function(){

returnfunction(items, name){

    var arrayToReturn = [];        
    for (var i=0; i<items.length; i++){
        if (items[i].name != name) {
            arrayToReturn.push(items[i]);
        }
    }

    return arrayToReturn;
};

Here is the working jsFiddle: http://jsfiddle.net/pkozlowski_opensource/myr4a/1/

The other simple alternative, without writing custom filters is to store a name to filter out in a scope and then write:

$scope.weDontLike = function(item) {
  return item.name != $scope.name;
};

Solution 3:

Actually you can pass a parameter ( http://docs.angularjs.org/api/ng.filter:filter ) and don't need a custom function just for this. If you rewrite your HTML as below it'll work:

<divng:app><divng-controller="HelloCntl"><ul><ling-repeat="friend in friends | filter:{name:'!Adam'}"><span>{{friend.name}}</span><span>{{friend.phone}}</span></li></ul></div></div>

http://jsfiddle.net/ZfGx4/59/

Solution 4:

You can simply do like this In Template

<span ng-cloak>{{amount |firstFiler:'firstArgument':'secondArgument' }}</span>

In filter

angular.module("app")
.filter("firstFiler",function(){

    console.log("filter loads");
    returnfunction(items, firstArgument,secondArgument){
        console.log("item is ",items); // it is value upon which you have to filterconsole.log("firstArgument is ",firstArgument);
        console.log("secondArgument ",secondArgument);

        return"hello";
    }
    });

Solution 5:

Extending on pkozlowski.opensource's answer and using javascript array's builtin filter method a prettified solution could be this:

.filter('weDontLike', function(){
    returnfunction(items, name){
        return items.filter(function(item) {
            return item.name != name;
        });
    };
});

Here's the jsfiddle link.

More on Array filter here.