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

Question

我需要一个包含多个值的单元格表。我为 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 笨蛋。

感谢您的帮助。

Answer 1

首先，管道| 之后的格式不正确-过滤器的名称不能包含点，您可以做的是有一个过滤器从字符串中应用过滤器，这就是我可以提出的解决方案我的头顶：

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