Форматирование значений нижнего колонтитула в ui-сетке

Как мне форматировать агрегированное значение для столбца в ui-grid?

С моими номерами я получаю что-то ужасное, как

total: 6370.046074130321

когда я хотел бы

total: $6370.05

Я пробовал оба:

footerCellTemplate: '<div class="ui-grid-cell-contents" >{{COL_FIELD | currency}}</div>',

и

footerCellTemplate: '<div class="ui-grid-cell-contents" >{{grid.getCellValue(row, col) | currency}}</div>',

но никто из них не работает.

Ответы

Ответ 1

Шаблоны, которые вы пробовали, будут работать для нормальных значений ячеек, но вы пытаетесь заставить шаблон работать над совокупным значением.

Чтобы получить агрегированное значение для столбца внутри шаблона, вы можете использовать {{col.getAggregationValue()}} и добавить параметры формата.

Поскольку вы хотите иметь два десятичных знака, это будет больше похоже на {{col.getAggregationValue() | number:2 }}

Также помните, что шаблон будет отличаться, если в сетке включены фильтры столбцов.

Ответ 2

если вам понадобится после десятичной точки, чтобы показать два значения, затем используйте пользовательские функции шаблона в параметрах сетки

       {
            field: 'ORGINAL_FUNC_AMOUNT',
            displayName: 'CR A/C',
            aggregationType: uiGridConstants.aggregationTypes.sum,
            footerCellTemplate: '<div class="ui-grid-cell-contents" >Total: {{col.getAggregationValue() | number:2 }}</div>'
        }

Ответ 3

Вы можете использовать фильтр number, чтобы выбрать количество десятичных цифр, которое вам нужно.

{{'$' + valueToFormat | number:2}}

В противном случае вы можете использовать настраиваемый фильтр для фильтрации текста/значения самостоятельно.

В вашем модуле вы добавляете:

.filter('customFilterFunction', function() {
return function(input) {
    var out = "";
    out = '$' + parseFloat(input).toFixed(2);
    return out;
  };
})

В своем HTML вы добавляете:

{{valueToFormat | customFilterFunction}}

Ответ 4

$templateCache.put('ui-grid/uiGridFooterCell',
"<div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\"><div>{{ col.getAggregationText() + ( col.getAggregationValue() CUSTOM_FILTERS ) }}</div></div>"  );

CUSTOM_FILTERS = свойство footerCellFilter grid.colDef [0].footerCellFilter = 'число: 2'