在角度ui网格中显示自定义布尔值

Question

好的，我是角度和角度ui网格的新手。我使用angularjs（v1.4）和angular ui网格（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网格来实现这一点吗？

Answer 1

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

我制作了一款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';
  },
}

Answer 2

@CMR感谢您加入Plunkr。当我看的时候，我检查了一下，在这种情况下，使用mapValue函数似乎有些过头了。

这对我有效：

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

（我在那里添加了类以匹配其他单元格）。我要说的是，这对我来说仍然有点刺鼻。

这个问题导致使用函数作为字段本身：在ui网格中，我想使用colDef'；s字段属性。如何将另一个函数作为参数传递给它？

我仍然希望直接在Defs专栏中看到一个带有逻辑的答案。

Answer 3

您可以在columnDef中为列cellFilters : 'yourfiltername:args'指定角度过滤器。

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

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