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

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

感谢。

Answer 1

您可以使用＆＃39;货币＆＃39; 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, '$&,');
    }
});

干杯， ģ

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更改为{{1} } - 这意味着＆＃34;始终显示2位小数＆＃34;。

然后我想在单元格的左边有一个美元符号（以避免变化的金额），为此我添加了以下css：

number:2

这让我得到了最后的结果：

Answer 4

尝试这样的方法，这适用于角度原生过滤器

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

Answer 5

您可以使用cellFilter属性和默认的angularJS货币过滤器现场演示 - http://plnkr.co/edit/NSiCrM?p=preview

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

Answer 6

好好把你的$从正则表达式中拿出来作为首发。把它放在标签之后。除了$ part之外，该表达式有效。看起来你只是试图在{{}}内调用Javascript函数而不是在控制器中调用某些东西。移动Number（）。toFixed（）。替换为控制器中的函数并调用该函数

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

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

6 个答案:

详细说明：