本文转自：https://*.com/questions/27747184/format-a-ui-grid-grid-column-as-currency-rc-3-0
You can use 'currency' cellFilter to format your data.
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{name: 'Award Title', field: 'projectTitle', minWidth: 100 },
{name: 'Amount', field: 'awardAmount', cellFilter: 'currency' }}
]
};
Have a look at this nice article : http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed/
In summary your options are :
- Bindings
- Cell Filters
- Cell Templates
- Links
- Buttons
- Custom directives
I have used the cell Filter option myself (code translated to your case, not tested):
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{
name: 'Award Title',
field: 'projectTitle', minWidth: 100
}, {
name: 'Amount',
field: 'awardAmount',
cellFilter: 'currencyFilter'
}
]
};
With filter defined hereunder :
app.filter('currencyFilter', function () {
return function (value) {
return value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
}
});
Cheers, G
I'm late to the party, but wanted to share the best thing that worked for me:
JS:
myGrid.columnDefs = [{
field: "Sale",
cellFilter: 'number:2',
cellClass:'currency'
}]
CSS:
.currency{
text-align:right;
}
.currency .ui-grid-cell-contents:before{
content: '$';
float: left;
}
Final result:
Details:
First I tried using cellFilter:'currency' as mentioned in a previous answer, but it didn't allow for various dollar amounts and didn't align the values to the right:
So then I added a currency class, and right-align, which fixed alignment, but not different dollar amounts.
Unfortunately, I wasn't able to find an easy fix for this (although I feel like there is one out there somewhere), so I had to change the cellFilter from currency to number:2 - this means "Always show 2 decimals".
Then I wanted a dollar sign at the left of the cell (to avoid varying dollar amounts), for that I added the following css:
.currency .ui-grid-cell-contents:before{
content: '$';
float: left;
}
Which left me with the final result: