在 Angular ui-grid 中显示自定义布尔值

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

控制器基本上进行 http 调用并将数据馈送到网格。

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

目前，网格中的最后一项根据布尔字段值显示为 'true' 或 'false'。当我双击该字段时，会出现一个复选框。

所以，我需要将 true 显示为 'active'，将 false 显示为 'inactive'。有什么方法可以用 angular ui-grid?

Answer 1

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

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

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

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

注意：如果您更熟悉 ng-bind，您也可以使用 "<div>{{grid.appScope.mapValue(row)}}</div>"。

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

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

Answer 2

@CMR 感谢您提供 Plunkr。当我查看它时，我进行了检查，在这种情况下，使用 mapValue 函数似乎有点过分了。

这对我有用：

cellTemplate: "<div class='ui-grid-cell-contents'>{{row.entity.active ? 'active' : 'inactive'}}</div>"

（我在其中添加了 class 以匹配其他单元格）。我会说这对我来说还是有点怪怪的。

这个问题导致使用函数作为字段本身：

我仍然希望直接在 columnDefs 中看到带有逻辑的答案。

Answer 3

您可以使用 angular 过滤器，在 columnDef 中为列 cellFilters : 'yourfiltername:args' 指定。

args 可以是变量或值，这种情况下注意使用正确的引号。如果 args 是字符串 cellFilters : 'yourfiltername:"active"'

您的过滤器可以直接是函数或过滤器名称。这里有一个plunkr

在 Angular ui-grid 中显示自定义布尔值

Display Custom Boolean Value in Angular ui-grid

javascript

angularjs

angular-ui-grid