将ui-grid网格列格式化为货币（RC 3.0）

Question

以下的网格选项按预期显示数据。但如果我尝试在我的cellTemplate中格式化row.entity[col.field]值，我将不会得到任何数据返回。

代码：

$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, '$&,')}}
    ]
};

任何有关如何将该列格式设置为货币的指导都会受到赞赏。

谢谢。

- dmalikyar

---

你的控制台有没有出现任何错误？不确定你表达式中replace()部分的目的是什么，因为toFixed()应该可以给你想要的结果，但这似乎不是问题所在。 - Scott

控制台没有错误。我的目标是，如果我得到了“1234”作为金额，我希望它格式化为$1,234.00。 - dmalikyar

Answer 1

您可以使用“currency”单元格过滤器来格式化数据。

$scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
        {name: 'Award Title', field: 'projectTitle', minWidth: 100 },
        {name: 'Amount', field: 'awardAmount', cellFilter: 'currency' }}
    ]
};

- Aman Mahajan

---

这是比编写自己的代码更简单的方法。你也可以像这样自定义货币符号和小数位数：cellFilter: 'currency:"£" : 5' - Adam Diament

Answer 2

请看这篇不错的文章：http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed/

总结一下，您有以下选择：

• 数据绑定（Bindings）
• 单元格过滤器（Cell Filters）
• 单元格模板（Cell Templates）
• 链接（Links）
• 按钮（Buttons）
• 自定义指令（Custom directives）

我自己使用了单元格过滤器选项（代码已翻译到您的情况，未经测试）：

$scope.gridOptions = {
   enableSorting: true,
   columnDefs: [
      {
          name: 'Award Title', 
          field: 'projectTitle', minWidth: 100
      }, {
          name: 'Amount', 
          field: 'awardAmount', 
          cellFilter: 'currencyFilter'
      }
   ] 
};

使用下面定义的筛选器：

app.filter('currencyFilter', function () { 
    return function (value) {
        return value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
    }
});    

干杯，G

- GuillaumeS

Answer 3

我迟到了，但想分享对我最有效的事情：

JS:

myGrid.columnDefs = [{
    field: "Sale",
    cellFilter: 'number:2',
    cellClass:'currency'
}]

CSS：

.currency{
    text-align:right;
}
.currency .ui-grid-cell-contents:before{
    content: '$';
    float: left;
}

最终结果：

---

详情：

首先我尝试使用cellFilter:'currency'，如之前的回答所提到的，但它不允许各种美元金额，并且不能将值对齐到右侧：

然后我添加了一个currency类和right-align，这解决了对齐问题，但不能处理不同的美元金额。

不幸的是，我无法找到一个简单的解决方法（虽然我感觉有一个解决方法存在），所以我不得不将cellFilter从currency更改为number:2 - 这意味着“始终显示 2 位小数”。

然后我想在单元格左侧添加一个美元符号（以避免不同的美元金额），为此我添加了以下 CSS：

.currency .ui-grid-cell-contents:before{
    content: '$';
    float: left;
}

这给我留下了最终结果：

- Travis Heeter

Answer 4

您可以使用cellFilter属性和默认的angularJS货币过滤器。

演示 - http://plnkr.co/edit/NSiCrM?p=preview

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

- Parshwa Bhavesh Mehta

Answer 5

尝试像这样做，这将应用Angular本地过滤器。

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

- Henry Orozco

Answer 6

首先，从正则表达式中删除$。将其放置在标签后面即可。该表达式除了$部分之外都是有效的。看起来您只是想在{{}}中调用JavaScript函数，而不是调用控制器中的某个东西。将Number().toFixed().replace移动到控制器的函数中并调用该函数即可。

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

- Scott