AngularJS using a function as a filter

Question

A have an app where the filter for the content changes based on what button is clicked. For more of the straightforward filters, I've been able to figure it out. But now I'd like to create a filter that shows content that has a value within a certain range.

Here is the function I'm trying to use:

$scope.isGood = function(item){
    if(!isNan(item.rating)){
        return (item.rating>49);
    }
    return alert("Something broke!!");
    //returns true if the item has a high rating (is good, 50+)
    //returns false if the item has a poor rating (is bad, 49-)
}

Because the filter changes based on what part of navigation is clicked, and the navigation is dynamic, for the on-click of each navigation button, I run a function that grabs the filter from its link.filter section and places it into $scope.selectedFilter, a variable that is used in my ng-repeat like so:

<tr class="progress" ng-repeat="idea in ideas | filter:selectedFilter">

Since I have a handful of filters, rather than inject my own $filter and require to chain a bunch together, I'd like to write something that will fit in the $scope.selectedFilter variable, since I'd only like one filter on at a time anyways.

Here is an example of the way the dynamic navigation is set-up:

$scope.links = [
    {'name':'About', //title that will be displayed on the link
    'URL': '#/about', //URL/view that the link will lead to/show
    'filter':'' //view may simply change so some info is hidden or revealed
    },
    {'name':'Active',
    'URL': '#/active',
    'filter': {active: true}  //these {active...} buttons are straightforward and work
    },
    {'name':'Inactive',
    'URL': '#/active',
    'filter':{active: false}
    },
    {'name':'Good Rating',
    'URL': '#/active',
    'filter': 'isGood(item.rating)' //this is the function I want to filter by when clicked
    },
    {'name':'Bad Rating',
    'URL': '#/active',
    'filter':'!isGood(item.rating)'
    }
];

Here is my content I want to filter:

$scope.ideas = [
    {'title':'Title A',
    'rating': 80,
    active: true
    },
    {'title':'Title B',
    'rating': 55, //this would have a "good rating"
    active: false
    },
    {'title':'Title C',
    'rating': 10, //this would have a "bad rating"
    active: true
    }
];

But I can't get my filter to work and I'm unsure where I'm going wrong. I'm rather new to Angular, did I botch my syntax somewhere? I was trying to copy the waythis answer was written, but no-luck.

Any help would be appreciated. Thanks!

Strille · Accepted Answer · 2014-06-11 21:35:46Z

1

The problem is that the filter value was defined as a string, it needs to be a real function. This function can then call isGood in turn. So the following should work:

{
   'name':'Good Rating',
   'URL': '#/active',
   'filter': function(item) {
      return $scope.isGood(item.rating);
    }
}

answered Jun 11, 2014 at 21:35

Strille

5,7913 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2465164 Over a year ago

That didn't seem to work; I also tried just pasting the actual function contents into that function(item) (rather than returning the function) without luck.

Strille Over a year ago

Do you get any errors in the console? I noticed that you have written isNan instead of isNaN

user2465164 Over a year ago

Whoops I guess that was it! Surprised it didn't skip my if statement and give me alert though. But cool, now I know how to use functions in a filter, thanks!

Collectives™ on Stack Overflow

AngularJS using a function as a filter

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related