ui-grid angularjs 中的条件单元格模板 [英] Conditional cell template in ui-grid angularjs

问题描述

如何在ui-grid 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>'
    }]
};

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

The expected result should be row status show Active/NonActive/Deleted.

这是plunker

提前致谢.

推荐答案

你必须使用externalScopes.

在你的标记中像这样定义gridholder.

In your markup define the gridholder like this.

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

并在您的控制器中使用此代码:

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

或者使用角度过滤器.

请注意，这仅呈现文本.最好的方法是在 ui-grid 中使用 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-grid angularjs 中的条件单元格模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！