CODEWITHSUNDEEP
angularjsangular-ui-gridangularjs-filter
jedi
jedi

Reputation: 859

dynamic angular filter in ui-grid grouped custom cell template

I need a cell table with more than one value. I made a construct for ui-grid options, a custom template for the cell and few css lines. It works and permit me to decide if value must stay in the same line or in more than one line.

Custom template:

var template = 
  '<div class="ui-grid-cell-contents crm-group">'+
    '<div class="crm-group-row" ng-repeat="rowFields in col.colDef.fields">' +
        '<div class="crm-group-col" ng-repeat="colField in rowFields" ng-if="row.entity[colField.name]">' +
            '<span class="title" ng-if="colField.descr">'+
                '{{colField.descr}}: '+
            '</span>' +
            '<span class="content">'+
                //"{{row.entity[colField.name] }}"+ //without filter
                "{{row.entity[colField.name] | colField.cellFilter}}"+ //<-- HERE doesn't work
            '</span>' +
        '</div>'+
    '</div>' +
  '</div>';

option structure:

{ field: 'group', 
  name: 'Group', 
  width: '**',
  fields : [
      [
          {
              name: "age",
              descr: "Num",
              cellFilter : "floatToFixed:'2'",
          },
          {
              name: "email",
              descr: "Email",
          },
      ],
  ],
  cellTemplate: template
},

Now i need to apply a possible different filter to each value. So i set it on the field structure. In this case i want apply a custom filter to the first field value.

Filter:

app.filter('floatToFixed', function () {
    return function (input, number) {
      console.log(input);
      console.log(number); 

        if (!input)
            return null;

        if (!number)
            return input;
        else 
            return parseFloat(input).toFixed(parseInt(number));
    }
});

But it doesn't work. Here the plunker.

Help is appreciate.

Upvotes: 0

Views: 1453

Answers (1)

maurycy
maurycy

Reputation: 8465

First of all, you have incorrect format after pipe | - name of the filter can't contain dot, what you could do is have a filter that applies filter from a string, that's the solution I can came up from top of my head:

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

.filter('applyFilter', function($filter) {
    return function(input, filter) {
      var filterToApply = filter !== undefined ? filter.split(':') : undefined;
      return filterToApply === undefined ? input : $filter(filterToApply[0])(input, parseInt(filterToApply[1], 10))
    }
  })

and then in html

"{{row.entity[colField.name] | applyFilter:colField.cellFilter}}"

Upvotes: 1

Related Questions