[AngularJS] ng-grid column filter

Requirement

The following grid is implemented by ng-grid.
The value of the second column, 預算階段, is P1/P1/F0/F1/F2.

According to the specification of this function, the value of the second column should be translated as bellows:

The ng-grid configuration :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

$scope.dbm003eGrid1 = { data : 'dbm003eGrid1Data', selectedItems: $scope.dbm003eGrid1SelectedRow, columnDefs : [ { field : 'accountYr', displayName : '預算年度', width: 100, cellClass: 'text-left', cellFilter : 'mingGuoYearFilter'}, { field : 'budgetStatus', displayName : '預算階段', width: 100, cellClass: 'text-left'}, { field : 'budgetCode', displayName : 'budgetCode', width: 0, cellClass: 'text-left', visible : false}, { field : 'budgetName', displayName : '預算別', width: 200, cellClass: 'text-left'}, { field : 'debtCode', displayName : 'debtCode', width: 0, cellClass: 'text-left', visible : false}, { field : 'debtName', displayName : '債務別', width: 400, cellClass: 'text-left'}, { field : 'budgetYearPeriod', displayName : '預算年度', width: 100, cellClass: 'text-left'}, { field : 'beginYear', displayName : 'beginYear', width: 0, cellClass: 'text-left', visible : false}, { field : 'endYear', displayName : 'endYear', width: 0, cellClass: 'text-left', visible : false}, { field : 'ttlAmount', displayName : '預算總額', width: 150, cellClass: 'text-right', cellFilter: 'number'}], enableColumnResize :true, plugins : [ new ngGridFlexibleHeightPlugin({ minHeight : 30, maxHeight : 150 }) ], i18n:'zh-tw', multiSelect : false };

How-To
We can use column filter to fulfill this requirement.
We can create a formatter to convert bugetStatus from code to description

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

/* 轉換預算階段 * P0-預算案數 * P1-預算數 * F0-決算數 * F1-院編決算數 * F2-審定決算數 */ formatters.filter('budgetStatusFilter', function(){ return function (budgetStatus){ if(budgetStatus == 'P0'){ return '預算案數'; }else if(budgetStatus == 'P1'){ return '預算數'; }else if(budgetStatus == 'F0'){ return '決算數'; }else if(budgetStatus == 'F1'){ return '院編決算數'; }else if(budgetStatus == 'F2'){ return '審定決算數'; } }; });

Apply this filter to bugetStatus column in dbm003eGrid1:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

$scope.dbm003eGrid1 = { data : 'dbm003eGrid1Data', selectedItems: $scope.dbm003eGrid1SelectedRow, columnDefs : [ { field : 'accountYr', displayName : '預算年度', width: 100, cellClass: 'text-left', cellFilter : 'mingGuoYearFilter'}, { field : 'budgetStatus', displayName : '預算階段', width: 100, cellClass: 'text-left', cellFilter : 'budgetStatusFilter'}, { field : 'budgetCode', displayName : 'budgetCode', width: 0, cellClass: 'text-left', visible : false}, { field : 'budgetName', displayName : '預算別', width: 200, cellClass: 'text-left'}, { field : 'debtCode', displayName : 'debtCode', width: 0, cellClass: 'text-left', visible : false}, { field : 'debtName', displayName : '債務別', width: 400, cellClass: 'text-left'}, { field : 'budgetYearPeriod', displayName : '預算年度', width: 100, cellClass: 'text-left'}, { field : 'beginYear', displayName : 'beginYear', width: 0, cellClass: 'text-left', visible : false}, { field : 'endYear', displayName : 'endYear', width: 0, cellClass: 'text-left', visible : false}, { field : 'ttlAmount', displayName : '預算總額', width: 150, cellClass: 'text-right', cellFilter: 'number'}], enableColumnResize :true, plugins : [ new ngGridFlexibleHeightPlugin({ minHeight : 30, maxHeight : 150 }) ], i18n:'zh-tw', multiSelect : false };

Test result