web-dev-qa-db-ja.com

UIグリッドグリッド列を通貨としてフォーマットする（RC 3.0）

以下のグリッドオプションは、期待どおりにデータを表示します。しかし、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, '$&,')}}
    ]
};

列を通貨としてフォーマットする方法についてのガイダンスはありがたいです。

ありがとう。

angularjsangular-ui-grid
15
dmalikyar

'currency' cellFilterを使用してデータをフォーマットできます。

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

この素敵な記事を見てください： 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

11
GuillaumeS

私はパーティーに遅れましたが、私にとってうまくいった最高のものを共有したいと思いました。

JS：

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

CSS：

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

最終結果：

The final currency column

詳細：

最初に、前の回答で述べたようにcellFilter:'currency'を使用してみましたが、さまざまな金額を考慮しておらず、値を右に揃えていませんでした。

Using only the currency filter.

それで、currencyクラスとright-alignを追加しました。これらは配置を修正しましたが、金額は異なりませんでした。

Added alignment.

残念ながら、簡単な修正を見つけることができなかったため（どこかにあるように感じます）、cellFilterをcurrencyからnumber:2に変更する必要がありました-これは、 「常に小数点以下2桁を表示」。

Show 2 decimals

次に、セルの左側にドル記号が必要でした（ドル金額の変動を避けるため）。そのために、次のCSSを追加しました。

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

最終的な結果を残した：

Final column, right-aligned and compensating for various dollar amounts.

3
Travis Heeter

CellFilter属性とデフォルトのangularJS通貨フィルターライブデモを使用できます- http://plnkr.co/edit/NSiCrM?p=preview

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

このようなものを試してください、これはangularネイティブフィルターを適用します

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

手始めに、正規表現から$を取り出してください。タグの後に置くだけです。 $部分は別として、式は機能します。コントローラーで何かを呼び出すのではなく、{{}}内でJavaScript関数を呼び出そうとしているようです。 Number（）。toFixed（）。replaceをコントローラーの関数に移動し、代わりにそれを呼び出します

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