在UI网angularjs条件电池模板 [英] Conditional cell template in ui-grid angularjs

问题描述

显示 UI网数据时如何添加条件 cellTemplate如下：

How to add conditional when showing data in ui-grid cellTemplate below:

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

预期的结果应该是行状态显示活动/非活动/删除。

下面是 plunker

先谢谢了。

推荐答案

您必须使用 externalScopes 。

在您的标记这样定义gridholder。

In your markup define the gridholder like this.

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

和在你的控制器使用该code：

And in your controller use this code:

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

或者使用角度滤波器。

Or use an angular filter.

请注意，这仅渲染文本。最好的办法是在UI电网使用它之前转换 myData的有真正的文本状态。万一你想要做一些基于文本过滤以后。

Note that this only renders text. The best approach would be to transform myData to have real text states before using it in ui-grid. Just in case you want to do some text based filtering later on.

下面是一个 Plunker

这篇关于在UI网angularjs条件电池模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！