将ui-grid网格列格式化为货币(RC 3.0)

Question

下面的网格选项按预期显示数据.但是,如果我尝试格式化row.entity[col.field]cellTemplate中的值,我不会返回任何数据.

码:

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

有关如何将列格式化为货币的任何指导都表示赞赏.

谢谢.

Answer 1

您可以使用'currency'cellFilter来格式化数据.

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

Answer 2

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

总之,您的选择是:

• 绑定
• 细胞过滤器
• 单元格模板
• 链接
• 纽扣
• 自定义指令

我自己使用了单元格过滤器选项(代码已翻译为您的案例,未经过测试):

$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

Answer 3

首先，我们将 $ 从正则表达式中去掉。只需将其放在标签后面即可。除了 $ 部分之外，该表达式是有效的。看起来您只是尝试在 {{ }} 中调用 Javascript 函数，而不是在控制器中调用某些内容。将 Number().toFixed().replace 移动到控制器中的函数中并调用它

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