Format a ui-grid grid column as currency (RC 3.0)

问题

The grid options below display the data as expected. But If I try to to format the row.entity[col.field] value in my cellTemplate, I don't get any data returned.

Code:

$scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
        {name: 'Award Title', field: 'projectTitle', minWidth: 100 },
        {name: 'Amount', field: 'awardAmount', cellTemplate: '<div>{{Number(row.entity[col.field]).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}}
    ]
};

Any guidance on how to format the column as currency is appreciated.

Thanks.

回答1:

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' }}
    ]
};

回答2:

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

回答3:

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:

回答4:

Try something like this, this apply angular native filters

cellTemplate: "<div>[[ row.entity[col.field]  | currency:'Q':2 ]]"

回答5:

You can use cellFilter attribute and default angularJS currency filter Live Demo - http://plnkr.co/edit/NSiCrM?p=preview

$scope.colDefs = [
    { field: 'firstName', 
      displayName: 'FN' 
    },
    { field: 'amount',
      displayName: 'AMT', 
      cellFilter: 'currency'
    }
  ];

回答6:

Well take your $ out of the regular expression for starters. Just put it after the tag. The expression, apart from the $ part, works. It looks like you are just trying to call a Javascript function within the {{ }} rather than calling something in your controller. Move the Number().toFixed().replace into a function in your controller and call that instead

     $scope.asCurrency = function(val) {
       return Number(...).toFixed()......
     };

来源：https://stackoverflow.com/questions/27747184/format-a-ui-grid-grid-column-as-currency-rc-3-0

标签

angularjs

angular-ui-grid