ui 网格分组自定义单元格模板中的动态 angular 过滤器

Question

我需要一个包含多个值的单元格 table。我为 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}}"

ui 网格分组自定义单元格模板中的动态 angular 过滤器

dynamic angular filter in ui-grid grouped custom cell template

angularjs

angularjs-filter

angular-ui-grid