javascript - 在 Angular ui-grid 中显示自定义 bool 值

Question

好的，我是 Angular 和 Angular ui-grid 的新手。我正在使用 angularjs(v1.4) 和 angular-ui-grid(v3.0.7)。

我定义了一个网格如下

seec.gridOptions = {};
  seec.gridOptions.rowEditWaitInterval = -1;
  seec.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;
    gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
  };

seec.gridOptions.columnDefs = [
    {name: 'pouch', displayName: 'Pouch', enableCellEdit: false, enableHiding: false, width: 250},
    {name: 'content', displayName: 'Content', enableHiding: false, width: 150},
    {
      name: 'units',
      displayName: 'Number of Items',
      type: 'number',
      enableHiding: false,
      width: 150
    },
    {name: 'active', displayName: 'Status', type: 'boolean', enableHiding: false, width: 150}
  ];

Controller 基本上进行 http 调用并将数据提供给网格。

if (response.status === 200) {
    seec.gridOptions.data = angular.copy(seec.data);
}

目前，网格中的最后一项根据 bool 字段值显示为“真”或“假”。当我双击该字段时，会出现一个复选框。

因此，我需要将 true 显示为“事件”，将 false 显示为“非事件”。有什么方法可以用 Angular ui-grid 来做到这一点吗？

Answer 1

当然有!一种方法是使用 cellTemplate并将您的行值映射到不同的东西。

我创建了 a Plunkr展示可能的设置。

有两个步骤。首先将一个 cellTemplate 添加到您的列中:

cellTemplate: "<div ng-bind='grid.appScope.mapValue(row)'></div>"

注意:您也可以使用 "<div>{{grid.appScope.mapValue(row)}}</div>" 而不是 ng-bind| ，如果您对此更熟悉的话。

第二步是定义映射函数，例如:

appScopeProvider: {
  mapValue: function(row) {
    // console.log(row);
    return row.entity.active ? 'active' : 'inactive';
  },
}