angular filter name as variable

Question

I'm designing universal table that reads data and columns from ajax. In columns description is also filter name which angular should use for a specific column. But in HTML templates I can't use variables for filter names:/ Is there a solution for that? Or should I code javascript loop with data source?

Here is code example:

<tr ng-repeat="item in data">
    <td ng-repeat="col in cols">
        {{item[col.source]}}
        <span ng-if="col.ngFilter">
            {{col.ngFilter}} // ex. "state" filter
            {{item[col.source]|col.ngFilter}} //is not working - is looking for "col.ngFilter" not "state" filter.
        </span>
    </td>
</tr>

Kursad Gulseven · Accepted Answer · 2014-11-03 12:00:12Z

8

You cannot do it in your HTML. First, you need to apply the filter in your controller.

function MyCtrl($scope, $filter) {

    $scope.applyFilter = function(model, filter) {
        return $filter(filter)(model);
    };

}

Then, in your HTML:

Instead of

{{item[col.source]|col.ngFilter}}

use

{{applyFilter(item[col.source], col.ngFilter)}}

answered Nov 3, 2014 at 12:00

Kursad Gulseven

2,0081 gold badge27 silver badges28 bronze badges

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

1 Comment

piernik Over a year ago

Thanks for response - I put all filter handeling in javascript.

Tunaki · Accepted Answer · 2016-05-27 23:40:17Z

0

For anyone looking to do something like

{{applyFliter(item[col.source], col.ngFilter)}}

where ngFilter might contains some colon separated parameters such as

currency:"USD$":0

I ended up writing this little helper

function applyFilter (model, filter){
    if(filter){

        var pieces = filter.split(':');

        var filterName = pieces[0];

        var params = [model];

        if(pieces.length>1){
            params = params.concat(pieces.slice(1));
        }

        return $filter(filterName).apply(this,params);
    }else{
        return model;
    }
}

edited May 27, 2016 at 23:40

Tunaki

138k46 gold badges370 silver badges443 bronze badges

answered May 27, 2016 at 21:48

George

4,4133 gold badges33 silver badges33 bronze badges

Collectives™ on Stack Overflow

angular filter name as variable

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related