你的位置:首页 > 软件开发 > Java > [转]Format a ui

[转]Format a ui

发布时间:2017-08-18 14:00:09
本文转自:https://stackoverflow.com/questions/27747184/format-a-ui-grid-grid-column-as-currency-rc-3-0 You can use 'currency' cellFilte ...

本文转自:https://stackoverflow.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 : 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:

[转]Format a ui


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:

[转]Format a ui

So then I added a currency class, and right-align, which fixed alignment, but not different dollar amounts.

[转]Format a ui

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".

[转]Format a ui

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:

[转]Format a ui

 

原标题:[转]Format a ui

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录