angularjs - ui-grid angularjs 中的条件单元格模板

Question

如何在 ui-grid 中显示数据时添加条件下面的单元格模板:

$scope.status = ['Active', 'Non Active', 'Deleted'];
$scope.gridOptions = {
    columnDefs: [{
        field: 'code'
    }, {
        field: 'name'
    }, {
        field: 'status',
        cellTemplate: '<div>{{status[row.entity.status]}}</div>'
    }]
};

预期结果应该是行状态显示 Active/NonActive/Deleted .

这是plunker

提前致谢。

Answer 1

您必须使用 externalScopes .

在您的标记中，像这样定义 gridholder。

<div ui-grid="gridOptions" external-scopes="states" class="grid"></div>

并在您的 Controller 中使用此代码:

var statusTxt = ['Active', 'Non Active', 'Deleted'];

$scope.states = {
  showMe: function(val) {
    return statusTxt[val];
  }
};

var statusTemplate = '<div>{{getExternalScopes().showMe(row.entity.status)}}</div>';
$scope.gridOptions = {
  columnDefs: [{
    field: 'code'
  }, {
    field: 'name'
  }, {
    field: 'status',
    cellTemplate: statusTemplate
  }]
};

或者使用 Angular 过滤器。

注意这个只有渲染 文本。最好的方法是转换 myData在 ui-grid 中使用之前拥有真实的文本状态。以防万一您以后想进行一些基于文本的过滤。

这是一个 Plunker