Angularjs Multiple Filter with Custom Filter Function

AngularJS multiple filter with custom filter function

Try this:

<tr ng-repeat="player in players | filter:{id: player_id, name:player_name} | filter:ageFilter">

$scope.ageFilter = function (player) {
    return (player.age > $scope.min_age && player.age < $scope.max_age);
}

How to Chain multiple custom filters with AngualrJS

Here is a solution (HTML only), without declaring a custom function in your Angular controller:

<tr ng-repeat="actionPlan in actionPlans | filter: {ActionPlan: filterItem.ActionPlan, Period: filterItem.Period, Org: filterItem.Org}">

Forked your Plunker here.

AngularJS how to have multiple $filter in a controller?

I think your getting a little mixed up. You can specify an object map like your second example. This is what the docs state about it when you do.

Object: A pattern object can be used to filter specific properties on
objects contained by array. For example {name:"M", phone:"1"}
predicate will return an array of items which have property name
containing "M" and property phone containing "1". A special property
name $ can be used (as in {$:"text"}) to accept a match against any
property of the object or its nested object properties. That's
equivalent to the simple substring match with a string as described
above. The predicate can be negated by prefixing the string with !.
For example {name: "!M"} predicate will return an array of items which
have property name not containing "M".

The important thing to take away here is the second sentence and the and. Meaning in order for a match the string, in your case text, has to match ALL properties specified in your map.

Searching for just male wont match if the name is only John for example. But searching for ma would return the following record:

{
   name: 'mark',
   gender: 'male'
}

Just for FYI you can also search by object map through the view but it has the same limitations.

That being said it is possible to use the $ wildcard giving it a comma separated list of properties. This will do an or match over any of the properties.

{
   $: 'name,gender'
}

The catch here is all properties will have the same value checked against them.

Here's a fiddle showing them in action.

The other answers sum up quite well the alternatives, just felt they were lacking in explaining what was happening and the reasons behind it.

AngularJS multiple filters

<li ng-repeat="cross in filteredItems = (items | filter:filter1 | filter:filter2 | filter:filter3)">

If you notice, I have created a new scope variable there called filteredItems. This makes it easy to check if there are any items left after filtering. You may wish to display a message such as "No items found" if !filteredItems.length.

E.g.

<div ng-hide="filteredItems.length" class="row">
    <div class="col-xs-10 col-sm-11 col-md-11">No items found</div>
</div>

How to create multiple custom filters within a single module in Angularjs

angular.module('filters', []).filter("truncate", function() {})
                             .filter("escape", function() {});

How to pass multiple parameter in angular filter function, not custom filter

Will try:

$scope.isStatus = function(secondParam, thirdParam){
      return function(user) {
           console.log(secondParam);
           console.log(thirdParam);
           return user.status == $scope.status;
     }

Updated version http://jsfiddle.net/4PYZa/282/

How do I specify a custom filter function for ng-repeat?

In order to create a custom AngularJs filter that accepts a paramter, you need to define it as a filter like this. The idea is simple: the filter returns a FILTERED version of your array (this way, you don't blow up the digest cycle with tons of changes to the root array you are observing).

In your case:

1. Create a filter

app.filter('hasTag', function() {
  return function(items, tagName) {
    var filtered = [];
    angular.forEach(items, function(el) {
      if(el.tags && el.tags.indexOf(tagName)>-1) {
        filtered.push(el);
      }
    });
    return filtered;
  }
});

2. Change your filter parameter

<div ng-repeat="athlete in athletes | hasTag:'Defense'">

That should do it.

Option #2 - Change your ng-repeat to use a filtered array.

Because most of my filters are very "controller-specific" -- I tend to use a filtered array as my ng-repeat source.

<div ng-repeat="athlete in AthletesByRole('Defense')">

That approach lets me control the cache myself at the controller level ... and I find it easier to read/maintain (since AthletesByRole() is a function inside the controller instead of a filter function in some random "other" js file that I have to track down 6 months after it was written) ... Just an added thought to consider.

---

Related Topics