ui-grid分组自定义单元模板中的动态角度滤波器

时间:2016-11-17 10:49:27

标签: angularjs angular-ui-grid angularjs-filter

我需要一个包含多个值的单元格表。我为ui-grid选项制作了一个构造,一个用于单元格的自定义模板和几个css线。它起作用并允许我决定值是否必须保持在同一行或多行中。

自定义模板:

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>';

选项结构:

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

现在我需要对每个值应用可能不同的过滤器。所以我把它设置在场结构上。在这种情况下,我想将自定义过滤器应用于第一个字段值。

过滤器:

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));
    }
});

但它不起作用。 Here掠夺者。

帮助很感激。

1 个答案:

答案 0 :(得分:1)

首先,管道|后的格式不正确 - 过滤器的名称不能包含点,您可以做的是使用过滤器从字符串中应用过滤器,&#39;我可以从头脑中找到解决方案:

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))
    }
  })

然后在html中

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