Call Angular $filter using expression string

Question

I am trying to call $filter using a filter expression via a filter string I've stored as metadata. For instance my filter string might look like this:

var filterForMyValue = "number : 2 | someOtherFilter";

This would be no problem I was invoking a similar hardcoded filter via markup:

<span>{{ somevalue |  number : 2 | someOtherFilter</span>

However I want to programmatically apply this filter. Doing something like this $filter(myFilterString)(valueToFilter) doesn't work since you can't include the filter parameters or multiple chained filters as a single string. It will only allow you to pass the filter name and then the parameters must be passed separately which I don't want since this is a generic method that needs to apply any filter string to a value. I thought $parse might be of some use but I was unable to find any examples of how it might be combined with $filter to achieve this.

Bharat · Accepted Answer · 2015-07-21 09:48:05Z

2

This is in the lines of bluetoft comment, maybe one step closer using parser service instead of compile.

http://plnkr.co/edit/ZyFZ42XAuuE4tRZbxKqn?p=preview

$scope.item = 1.123;

//Option 1
var filterFn = $parse('item |number:2|myFilter');
console.log(filterFn($scope));

//Option 2
$scope.item = $filter('number')($scope.item, 2);
$scope.item = $filter('myFilter')($scope.item);
console.log($scope.item);

There are 2 options. Option1 uses parser and option may be you can create custom filter chain service (this is what internally the parser service would do but this is more in terms of your expected pattern of passing input/filters).

answered Jul 21, 2015 at 9:48

Bharat

9437 silver badges9 bronze badges

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

3 Comments

KingOfHypocrites Over a year ago

It's too bad I can't have a dedicated scope in the custom filter. Then I could assign the passed in value to the scope and apply the filter like you show.

Bharat Over a year ago

Not sure if this would help but you don't need a dedicated scope. $parse expects a context/ohject (which in your case could be the item to filter). So in this case, filterFn({item: 1.123}) should also work. If you know the item to be filtered, you can create an object and then set the item inside the object. The filterFn should be able to filter on that.

Jim Over a year ago

The parse option works great by the way, looks like this: var context = { value: myValue }; var getter = $parse('value | ' + filterExpression); /* i.e. "number:2" */ filteredText = getter(context);

bluetoft · Accepted Answer · 2015-07-21 04:09:42Z

1

I'm not aware of a way to do EXACTLY what you're asking, but I think the $compile service may come of some help going about this in another manor.

var app = angular.module('myApp',[]);

app.filter('myFilter',function(){
  return function(val){

    return val * 2;
  }
});

app.directive('myDirective',function($compile){
  return {
    restrict:'E',
    link: function(scope,element){
      scope.filterForMyValue = "number : 2 | myFilter";
      scope.item = 1.123;
      var format = '<span>{{item |' + scope.filterForMyValue + '}}</span>';
      var compiled = $compile(format)(scope);
      element.append(compiled); 
    }

  }
});

Plunkr

answered Jul 21, 2015 at 4:09

bluetoft

5,4432 gold badges25 silver badges27 bronze badges

1 Comment

KingOfHypocrites Over a year ago

Thanks, this might be as close as I can get. I thought of something like this, but the downside is having to use the item | ... and requiring the value to be assigned to the scope. I'm trying to process the results of a json request. I basically look up the id of the value to get the filter string, then I apply it to the result.

Collectives™ on Stack Overflow

Call Angular $filter using expression string

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related