angularJS filter expression in ng-repeat

Question

I would like to know what is the most elegant and simple way to implement this. I need to add a filter expression for a ng-repeat that would filter 2 conditions from one property.

In this example http://plnkr.co/edit/OMQxXvSjtuudMRGE4eZ8?p=preview

• If you enter A, it would display checkbox for A,
• enter B - display checkbox for B.

But I want to display the specified checkboxes plus anything with empty condition. There is no condition for C, so:

• if you enter A, I want to display both A and C checkboxes,
• enter B, I want to display both B and C checkboxes.

Solution 1

I would create custom filter like:

app.filter('myfilter', function() {
   return function( items, condition) {
    var filtered = [];

    if(condition === undefined || condition === ''){
      return items;
    }

    angular.forEach(items, function(item) {          
       if(condition === item.condition ||  item.condition === ''){
         filtered.push(item);
       }
    });

    return filtered;
  };
});

and usage:

<span ng-repeat="charge in charges  |  myfilter:level.condition">

See Demo in Plunker

It looks pretty elegant and clear.

Hope it will help

Solution 2

I think you can do this pretty easily with just a filter expression function on your scope like this;

$scope.filterExpression = function(charge) {
  return (!$scope.level || !charge.condition || 
          ($scope.level.condition.toUpperCase() === charge.condition.toUpperCase()));
}

and call it like this;

<span ng-repeat="charge in charges | filter:filterExpression">

plunkr (corrected)

Solution 3

you can use : data-ng-repeat="charge in charges | filter:searchText" data-ng-if="filter = searchText.Name"

Comments

[Maxim Shoustin]

this filter will work but keep in mind that it will be hard for debugging.

[cirrus]

How so? It has the advantage of keeping the code related to the model with the controller.

[Maxim Shoustin]

I talk on style you implemented the filter. Anyways I think its good practice to write filters as separate module,

[cirrus]

I don't disagree in principle, but I think it depends on how generic or reusable that filter might be. This implementation is clearly coupled to model used in the controller so my preference would be to keep the code contained as a method on the controller.

[Annie C]

I agree writing filter as separate module is good practice, but I really want to know the 'simple' way, meaning the least amount of code when I am not worried about reusability.

[cirrus]

Sorry, gave you the wrong plunk ref - corrected now.

[George Udosen]

Now, here is some magic that you don't see every day! Thanks.