Total Pageviews

2015/11/05

[AngularJS] How to format a number value in ng-grid cell to two decimal places?

Problem
We are using ng-grid to implement data grid as bellows:

Our customer asks the amount column should set to two decimal places (小數點第二位).
The column definitions in this ng-grid are 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
 columnDefs : [ {
                field : 'belongFlag',
                displayName : '分類類別',
                width : '15%',
                cellClass : "text-left",
                cellFilter:'dbm034eBelongFilter:row.entity.mgeType'
            }, {
                field : "ageTypeName",
                displayName : '基金法人類別',
                width : '20%',
                cellClass : "text-left"
            }
            , {
                field : 'fundName',
                displayName : '基金法人名稱',
                width : '20%',
                cellClass : "text-left"
            }, {
                field : 'rate2Year',
                displayName : ($scope.model.year * 1 - 2) + '年度',
                width : '10%',
                cellClass : "text-right"
            }, {
                field : "rate1Year",
                displayName : ($scope.model.year * 1 - 1) + '年度',
                width : '10%',
                cellClass : "text-right"
            }, {
                field : "rate",
                displayName : ($scope.model.year * 1) + '年度',
                width : '10%',
                cellClass : "text-right"
            }, {
                field : "ageType",
                displayName : 'ageType',
                width : '0%',
                cellClass : "text-right",
                visable : false
            }
            ]


How-To
Set cellFiter to amount fields as bellows can fulfill this requirement:
 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
 columnDefs : [ {
                field : 'belongFlag',
                displayName : '分類類別',
                width : '15%',
                cellClass : "text-left",
                cellFilter:'dbm034eBelongFilter:row.entity.mgeType'
            }, {
                field : "ageTypeName",
                displayName : '基金法人類別',
                width : '20%',
                cellClass : "text-left"
            }
            , {
                field : 'fundName',
                displayName : '基金法人名稱',
                width : '20%',
                cellClass : "text-left"
            }, {
                field : 'rate2Year',
                displayName : ($scope.model.year * 1 - 2) + '年度',
                width : '10%',
                cellClass : "text-right",
                cellFilter:'number:2'
            }, {
                field : "rate1Year",
                displayName : ($scope.model.year * 1 - 1) + '年度',
                width : '10%',
                cellClass : "text-right",
                cellFilter:'number:2'
            }, {
                field : "rate",
                displayName : ($scope.model.year * 1) + '年度',
                width : '10%',
                cellClass : "text-right",
                cellFilter:'number:2'
            }, {
                field : "ageType",
                displayName : 'ageType',
                width : '0%',
                cellClass : "text-right",
                visable : false
            }
            ]

Check the result
Reference
[1] http://stackoverflow.com/questions/30382666/how-to-format-a-number-value-in-angularjs-ui-grid-cell-to-two-decimal
Posted by Albert Kuo at 8:00 AM
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)