Question

好吧，我是角度和角度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'。有没有办法用角度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';
  },
}

Answer 2

@CMR感谢包括Plunkr。当我查看它时，我检查了一下，在这种情况下，使用mapValue函数似乎有些过分。

这对我有用：

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

（我在那里添加了类以匹配其他单元格）。我会说这对我来说仍然有些惹人生气。

这个问题导致使用一个函数作为字段本身：In ui-grid, I want to use a function for the colDef's field property. How can I pass in another function as a parameter to it?

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

Answer 3

您可以在String array1 = new String(array); System.out.println(array1+'\t'+array1.length());中使用角度过滤器指定列columnDef。

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

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

在Angular ui-grid

3 个答案: