角度 ui-grid 分组标题

【问题标题】：angular ui-grid grouping header角度 ui-grid 分组标题
【发布时间】：2015-05-18 02:45:22
【问题描述】：

我正在尝试将组标题显示为 cellTemplate，这是我使用的模板：

<div class="ui-grid-cell-contents">
    <div ng-show="COL_FIELD">
        <i class="ace-icon fa fa-check bigger-110 green"></i>
    </div>
    <div ng-hide="COL_FIELD">
        <i class="ace-icon fa fa-times bigger-110 red"></i>
    </div>
</div>

这是 columnDefs：

{ 
    name:'active', 
    width: 100, 
    cellTemplate: $templateRequest('scripts/common/partials/formatter/boolean.tpl.html') 
}

这显示了当前在网格上的标志，但是当我将它分组时，它显示 2 个组都有“检查”标志”，我发现它发生是因为分组上的 COL_FIELD 是组合计数行的文本(0 (50), 1 (15)) 这是真的有没有正确设置组头的好方法？

【问题讨论】：

标签： javascript angularjs angular-ui angular-ui-grid

【解决方案1】：

http://ui-grid.info/docs/#/tutorial/209_grouping 中有一个示例，您会在底部看到一个在分组列上运行的性别过滤器。它是对值进行解串，然后将过滤器应用于没有计数的部分，然后将字符串重新组合在一起。

要将此逻辑应用于您的 cellTemplate，您需要在模板中放置一个函数来解开值并取出您想要的部分：

<div class="ui-grid-cell-contents">
    <div ng-show="grid.appScope.checkBool(COL_FIELD)">
        <i class="ace-icon fa fa-check bigger-110 green"></i>
    </div>
    <div ng-hide="grid.appScope.checkBool(COL_FIELD)">
        <i class="ace-icon fa fa-times bigger-110 red"></i>
    </div>
</div>

您需要编写 $scope.checkBool 函数来进行解串并返回 true 或 false。

如果您还想要计数，那么您需要编写一些逻辑来获取单元格的计数部分并将其附加到末尾。

目前正在重写其中的一些逻辑，这可能会让这变得更容易。

【讨论】：