UI Grid AngularJS：将自定义过滤器应用于页脚

Question

I created a custom filter for my ui-grid that I am exporting as a pdf using ui-grid-exporter that limits decimal numbers to two places, and it works when I export the ui-grid however it does not work within the footer when it is exporter.

Footer Expected: 32.34452436927346234523623462342345 Needed: 32.34

Here is the custom filter. This filter works within the ui-grid.

app.filter('rentalFilter', function () {
  return function (value, scope) {
    // Only perform logic if the value is actually defined
    if(typeof value != 'undefined') {
        if(value == null || value == "")
            value = 0;
        value = value.toFixed(2);
        if(value >= 0) {
            var parts=value.toString().split(".");
            return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
        }
        else {
            value = value * -1.00;
            value = value.toFixed(2);
            var parts=value.toString().split(".");
            return "-" + parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
        }
    }
  };
});

Here the columns are declared for the ui-grid

$scope.columns = [ {
    name : 'parm',
    category : "column1",
    width : '6%',
    enableColumnMenu : false,
    displayName : $scope.rollup
}, {
    name : 'mondayAwrv',
    displayName : 'AWRV',
    cellClass : 'green',
    category : "MONDAY",
    exporterPdfAlign: 'right',
    width : '6%',
    cellFilter : 'number : 2',
    footerCellFilter : 'number : 2',
    aggregationType : uiGridConstants.aggregationTypes.sum,
    aggregationHideLabel : true,
    enableColumnMenu : false
}, {
    name : 'mondayCredit',
    cellClass : function(grid, row, col, rowRenderIndex, colRenderIndex) {
        if (grid.getCellValue(row, col) < 0)
            return 'negative';
        return 'positive'
    },
    category : "MONDAY",
    exporterPdfAlign: 'right',
    width : '6%',
    cellFilter : 'number : 2',
    footerCellFilter : 'number : 2',
    aggregationType : uiGridConstants.aggregationTypes.sum,
    aggregationHideLabel : true,
    enableColumnMenu : false
}, {
    name : 'mondayPer',
    displayName : '%',
    category : "MONDAY",
    exporterPdfAlign: 'right',
    width : '6%',
    cellFilter : 'number : 2',
    footerCellFilter : 'number : 2',
    aggregationType : uiGridConstants.aggregationTypes.avg,
    aggregationHideLabel : true,
    enableColumnMenu : false
}, 
.....
//and so on for other days of the week
];

The export function exports the ui-grid as a pdf. Numbers are shown with a 2 decimal place limit

$scope.export = function(){
      //$scope.gridApi.exporter.pdfExport( uiGridExporterConstants.ALL, uiGridExporterConstants.ALL );
      var exportData = [];
      var exportColumnHeaders = $scope.gridOptions.showHeader ? uiGridExporterService.getColumnHeaders($scope.gridApi.grid, uiGridExporterConstants.VISIBLE) : [];
      angular.forEach($scope.gridApi.grid.rows, function(row) {
        if (row.visible) {
          var values = [];
          angular.forEach(exportColumnHeaders, function(column) {
            var value = row.entity[column.name];
            if (column.name == 'mondayAwrv' || column.name == 'mondayCredit' || column.name == 'mondayPer' ||
                column.name == 'tuesdayAwrv' || column.name == 'tuesdayCredit' || column.name == 'tuesdayPer' ||
                column.name == 'wednesdayAwrv' || column.name == 'wednesdayCredit' || column.name == 'wednesdayPer' ||
                column.name == 'thursdayAwrv' || column.name == 'thursdayCredit' || column.name == 'thursdayPer' ||
                column.name == 'fridayAwrv' || column.name == 'fridayCredit' || column.name == 'fridayPer') value = $filter('rentalFilter')(value);


            values.push({
              value: value
            });

          });
          exportData.push(values);
        }
      });

      var content = uiGridExporterService.prepareAsPdf($scope.gridApi.grid, exportColumnHeaders, exportData);

      pdfMake.createPdf(content).open();


    }

I am trying to apply the same to the getFooterValue function

$scope.getFooterValue = function(i){        
        return $scope.gridApi.grid.columns[i].getAggregationValue();
//template
    //[ '', {text: ($scope.getFooterValue(1)), alignment: 'right'}, {text: ($scope.getFooterValue(2)), alignment: 'right'},

        /*
        var exportData = [];
          var exportColumnHeaders = $scope.gridOptions.showHeader ? uiGridExporterService.getColumnHeaders($scope.gridApi.grid, uiGridExporterConstants.VISIBLE) : [];
          angular.forEach($scope.gridApi.grid.rows, function(row) {
            if (row.visible) {
              var values = [];
              angular.forEach(exportColumnHeaders, function(column) {
                var value = row.entity[column.name];
                if (column.name == 'mondayAwrv' || column.name == 'mondayCredit' || column.name == 'mondayPer' ||
                    column.name == 'tuesdayAwrv' || column.name == 'tuesdayCredit' || column.name == 'tuesdayPer' ||
                    column.name == 'wednesdayAwrv' || column.name == 'wednesdayCredit' || column.name == 'wednesdayPer' ||
                    column.name == 'thursdayAwrv' || column.name == 'thursdayCredit' || column.name == 'thursdayPer' ||
                    column.name == 'fridayAwrv' || column.name == 'fridayCredit' || column.name == 'fridayPer') value = $filter('rentalFilter')(value);


                values.push({
                  value: value
                });

              });
              exportData.push(values);
            }
          });

          var content = uiGridExporterService.prepareAsPdf($scope.gridApi.grid, exportColumnHeaders, exportData);

          content.pageMargins = [40, 80, 40, 60];   

          //pdfMake.createPdf(content).open();
          return $scope.gridApi.grid.columns[i].getAggregationValue();
        */

    }  

This is what exports the values for the footer.

$scope.gridOptions.exporterPdfFooter = {
        margin: [10, 5, 20, 10],    
        table: {

            widths: [ '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%', '6%',],

            body: [
                    [ '', {text: ($scope.getFooterValue(1)), alignment: 'right'}, {text: ($scope.getFooterValue(2)), alignment: 'right'}, {text: ($scope.getFooterValue(3)), alignment: 'right'}, {text: ($scope.getFooterValue(4)), alignment: 'right'}, {text: ($scope.getFooterValue(5)), alignment: 'right'}, {text: ($scope.getFooterValue(6)), alignment: 'right'} ],

            ]         
        }
    };

how can I apply the filter to the footer to limit the 2 decimal points?
Any help is much appreciated.

Answer 1

AngularJS has a built in filter for filtering a number by decimal places.

You could simply pipe this filter after any custom filter. Example:

<span>{{myNumber | myCustomFilter | number:2}}</span>

Answer 2

Al I had to do was add the filter to the body within exporterPdfFooter

body: [
            [{text: $filter('netFilter')($scope.getFooterValue(1))} ],

            ]