Total Pageviews

2015/11/19

[AngularJS] Round to at most 2 decimal places in ng-grid CellFilter

Problem
I utilize ng-grid to implement the grid as bellows:

 The value of 利率 has 4 decimal places, customer ask to change to 2 decimal places.
The ng-grid definition is as following:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 $scope.itemGrid = {
            multiSelect : false,
   data : 'itemData',
            showFooter : false,
            keepLastSelected: false,
   enableColumnResize: true,
            columnDefs : [ {
                field : 'fundName',
                displayName : '借入基金專戶',
                width : '21%',
                cellClass : "text-left",
                cellFilter:'dbm035eFundFilter:row.entity.toFundName : row.entity.debtType=="B"'
            }, {
                field : 'toFundName',
                displayName : '借出基金專戶',
                width : '21%',
                cellClass : "text-left",
                cellFilter:'dbm035eFundFilter:row.entity.fundName : row.entity.debtType=="B"'
            }, {
                field : 'debtDateB',
                displayName : '調借起日',
                width : '10%',
                cellClass : "text-left",
                cellFilter:"dbm035eToStringFilter|dateFilter" 
            }, {
                field : "debtDateE",
                displayName : "調借迄日",
                width : '10%',
                cellClass : "text-left",
                cellFilter:"dbm035eToStringFilter|dateFilter" 
            }, {
                field : "debtAmt",
                displayName : "調借金額",
                width : '10%',
                cellClass : "text-right",
                cellFilter:"dbm035eAmountFilter | number"
            }, {
                field : "debtRate",
                displayName : "利率",
                width : '8%',
                cellClass : "text-right"
            }, {
                field : "remark",
                displayName : "備註",
                width : '20%',
                cellClass : "text-left"
            }
   //....
 }];


How-To
Step 1. Create a cellFilter to debtRate field
1
2
3
4
5
    app.filter('dbm035eRateFilter', function() {
        return function(input) {
            return null==input?null:(Math.round(input * 100)/100);
        };
    });

Step 2. Add this cellFilter to debtRate field
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 $scope.itemGrid = {
            multiSelect : false,
   data : 'itemData',
            showFooter : false,
            keepLastSelected: false,
   enableColumnResize: true,
            columnDefs : [ {
                field : 'fundName',
                displayName : '借入基金專戶',
                width : '21%',
                cellClass : "text-left",
                cellFilter:'dbm035eFundFilter:row.entity.toFundName : row.entity.debtType=="B"'
            }, {
                field : 'toFundName',
                displayName : '借出基金專戶',
                width : '21%',
                cellClass : "text-left",
                cellFilter:'dbm035eFundFilter:row.entity.fundName : row.entity.debtType=="B"'
            }, {
                field : 'debtDateB',
                displayName : '調借起日',
                width : '10%',
                cellClass : "text-left",
                cellFilter:"dbm035eToStringFilter|dateFilter" 
            }, {
                field : "debtDateE",
                displayName : "調借迄日",
                width : '10%',
                cellClass : "text-left",
                cellFilter:"dbm035eToStringFilter|dateFilter" 
            }, {
                field : "debtAmt",
                displayName : "調借金額",
                width : '10%',
                cellClass : "text-right",
                cellFilter:"dbm035eAmountFilter | number"
            }, {
                field : "debtRate",
                displayName : "利率",
                width : '8%',
                cellClass : "text-right",
                cellFilter:"dbm035eRateFilter" 
            }, {
                field : "remark",
                displayName : "備註",
                width : '20%',
                cellClass : "text-left"
            }
   //....
 }];

Check the result
Reference
[1] http://stackoverflow.com/questions/11832914/round-to-at-most-2-decimal-places-in-javascript
Posted by Albert Kuo at 7:17 PM
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)