ng-grid cellTemplate 和分组：我可以更改“分组”行的模板吗

Question

我一直在检查 ng-grid，并将 columnDefs 更改为对某些列使用不同的 cellTemplate。此模板不显示实际值，而是在另一个对象中查找它，以使其对最终用户更具可读性（基本上是一个外键 id，被翻译成人类可以理解的东西）。

当我在gridOptions中启用showGroupPanel:true时，可以拖一列到'grouping'栏，结果会被分组。

当我对已编辑模板的列之一执行此操作时，它不使用我的 cellTemplate，并再次显示 id。

有没有办法确保在组的标题中，我也可以使用我自己的模板，而不是 ng-grid 只显示值？

[更新] 一些代码（简化为 1 列只显示本质）可能更容易理解（任何代码错误都是拼写错误，这不是我真实代码的复制粘贴）：

HTML：

<div ng-grid="gridOptions" class="gridStyle"></div>

JS：

$scope.gridOptions = { 
    data: 'data', enableSorting: true, showFilter: true, multiSelect: false,
    showGroupPanel: true,
    columnDefs: 'colDefs',
};

$scope.colDefs = [];
$scope.topicid_fkvalues = { 1: "Languages", 2: "Mathematics" };

var colDef1 = { 'field': 'Topic' };
colDef1.cellTemplate = '<label ng-class="\'colt\' + col.index" class="ng-pristine ng-valid colt3" style="width: 90%" >{{topicid_fkvalues[ COL_FIELD ]}} ({{COL_FIELD}})</label>';

$scope.colDefs.push( colDef1 );

$scope.data = [ { topicid: 1 }, { topicid: 2 }, { topicid: 1 } ]

因此，当我将此列拖到分组栏中时，我希望在组头中也看到描述，而不仅仅是 id...

[更新 2] 解决方案

我想我找到了一个很好的解决方案。

原来我不需要 cellTemplate，只需要一个过滤器。

所以，如果你在你的模块上定义一个新的过滤器，像这样：

app.filter( 
    'translateForeignKey', 
    function() {
        return  function( fk, fkValues ) {
                    return fkValues[ fk ];
                }
        ;
    }

);

你可以替换这个：

var colDef1 = { 'field': 'Topic' };
colDef1.cellTemplate = '<label ng-class="\'colt\' + col.index" class="ng-pristine ng-valid colt3" style="width: 90%" >{{topicid_fkvalues[ COL_FIELD ]}} ({{COL_FIELD}})</label>';

通过以下

var colDef1 = { 'field': 'Topic' };
colDef1.cellFilter = 'translateForeignKey: topicid_fkvalues';

这将添加带有 $scope.topicid_fkvalues 参数作为第二个参数的过滤器（并且此过滤器也将在“聚合”视图中使用）。因此，如果您有不同的列具有不同的翻译，您仍然可以使用相同的过滤器，但使用多个范围变量进行翻译。

希望这是有道理的，并帮助一些可能有同样问题的人......

Answer 1

解决方案

我想我找到了一个很好的解决方案。

原来我不需要 cellTemplate，只需要一个过滤器。

所以，如果你在你的模块上定义一个新的过滤器，像这样：

app.filter( 
    'translateForeignKey', 
    function() {
        return  function( fk, fkValues ) {
                    return fkValues[ fk ];
                }
        ;
    }

);

你可以替换这个：

var colDef1 = { 'field': 'Topic' };
colDef1.cellTemplate = '<label ng-class="\'colt\' + col.index" class="ng-pristine ng-valid colt3" style="width: 90%" >{{topicid_fkvalues[ COL_FIELD ]}} ({{COL_FIELD}})</label>';

通过以下

var colDef1 = { 'field': 'Topic' };
colDef1.cellFilter = 'translateForeignKey: topicid_fkvalues';

这将添加带有 $scope.topicid_fkvalues 参数作为第二个参数的过滤器（并且此过滤器也将在“聚合”视图中使用）。因此，如果您有不同的列具有不同的翻译，您仍然可以使用相同的过滤器，但使用多个范围变量进行翻译。