angularjs - UI グリッド - データの書式設定

Question

私は新しいAngular UI Gridを使用しています(これは ng-grid を置き換える予定です)。テーブルに表示する前に、データをフォーマットする必要があります。たとえば、私のサーバーは「ステータス」という名前の属性を数値として返しますが、それをわかりやすい名前で表示したいと考えています。

status=1 の場合は「Todo」、status=2 の場合は「Doing」などを表示します。

UI グリッドでこれを行うにはどうすればよいですか?

Answer 1

現在推奨される方法は、カスタム テンプレートではなく、cellFilter を使用することです。カスタム テンプレートは問題ありませんが、アップグレードの負荷が高くなります。新しい機能でテンプレートの変更が必要かどうかを確認する必要があります。

チュートリアルにフィルターの妥当な例があります: http://ui-grid.info/docs/#/tutorial/201_editable

cellFilter: 'mapGender'性別列の に注意してください。フィルター自体は、チュートリアルの下でさらに定義されています。

.filter('mapGender', function() {
  var genderHash = {
    1: 'male',
    2: 'female'
  };

  return function(input) {
    if (!input){
      return '';
    } else {
      return genderHash[input];
    }
  };
})

Answer 2

最初のステップでは、cellTemplate を列に追加します。

$scope.gridOptions.columnDefs = [
    {field:'status', displayName: 'Status',cellTemplate: 'statusTemplate.html'}
];

Template-File は次のようになります (COL_FIELD が実際のフィールドです)。

<div style="text-align: center">{{COL_FIELD==1 ? 'Todo' : 'Doing'"}}</div>

うまくいけば、あなたはアイデアを得ました！:)

Answer 3

最短の方法は、appScopeProvider で CellTemplate を使用することです。

  vm.gridOptions = {
        columnDefs: [
            {
                field: 'status',
                cellTemplate: '<div>{{grid.appScope.formatStatus(row)}</div>'
            }
        ],
        appScopeProvider: {
            formatStatus: function (row) {
                return row.entity.status === 1 ? 'Todo' : 'Doing';
            },
        }
    }