angularjs - UI 网格 - 格式化数据

Question

我正在使用新的Angular UI Grid（计划替换 ng-grid）。我的数据需要一些格式才能显示在表格中。例如，我的服务器以数字形式返回一个名为“status”的属性，但我想将其显示为一个好听的名称。

如果 status=1 显示“Todo”，如果 status=2 显示“Doing”等。

这如何在 UI Grid 中完成？

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'}
];

模板文件应如下所示（COL_FIELD 是实际字段）：

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

希望，你明白了！:)

Answer 3

最短的方法是将 CellTemplate 与 appScopeProvider 一起使用：

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