ui-grid angularjs 中的条件单元格模板 [英] Conditional cell template in ui-grid angularjs
本文介绍了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屋!
查看全文