Ui-Grid CellTemplate 未按预期运行
Ui-Grid CellTemplate does not behave as expected
我正在开发监控作业的仪表板,状态已更新
对接 Ui 中的 cellTemplate
-Grid 未按预期运行
这是我尝试过的
$scope.gridOptions = {
columnDefs: [{
field: 'Id'
}, {
field: 'Job'
}, {
field: 'status',
cellTemplate:'<div>{{grid.appScope.applyStatus(row.entity.status)}}</div>'
//note this work well
// cellTemplate:'<div><i class="fa fa-circle-o-notch fa-spin"></i></div>'
}]
};
并且这个函数应该用字体图标更新状态
$scope.applyStatus= function(status) {
switch(status)
{
case "Pending" :
return '<i class="label-info fa-pause" />';
case "Running" : return '<i class="label-primary fa-play-circle-o" />'
case "Error" :
return '<i class="label-danger fa-bug" />';
default:
return '<i class="label-default fa-box fa fa-question"/>';
}
return
};
但是 Angulars 并没有呈现我期望的效果,而是将其视为文本
这里是个笨蛋http://plnkr.co/edit/7UapXgNzZWPXVZbLjYFy?p=preview
任何有良好底层解释的帮助将不胜感激
这是一种使用 ng-class 的方法。 http://plnkr.co/edit/lRuP4agztDo7kxEO5VE6?p=preview
单元格模板:
<div><text><i ng-class="grid.appScope.applyStatus(row.entity.status)"/></text></div>
我正在开发监控作业的仪表板,状态已更新
对接 Ui 中的 cellTemplate
-Grid 未按预期运行
这是我尝试过的
$scope.gridOptions = {
columnDefs: [{
field: 'Id'
}, {
field: 'Job'
}, {
field: 'status',
cellTemplate:'<div>{{grid.appScope.applyStatus(row.entity.status)}}</div>'
//note this work well
// cellTemplate:'<div><i class="fa fa-circle-o-notch fa-spin"></i></div>'
}]
};
并且这个函数应该用字体图标更新状态
$scope.applyStatus= function(status) {
switch(status)
{
case "Pending" :
return '<i class="label-info fa-pause" />';
case "Running" : return '<i class="label-primary fa-play-circle-o" />'
case "Error" :
return '<i class="label-danger fa-bug" />';
default:
return '<i class="label-default fa-box fa fa-question"/>';
}
return
};
但是 Angulars 并没有呈现我期望的效果,而是将其视为文本
这里是个笨蛋http://plnkr.co/edit/7UapXgNzZWPXVZbLjYFy?p=preview
任何有良好底层解释的帮助将不胜感激
这是一种使用 ng-class 的方法。 http://plnkr.co/edit/lRuP4agztDo7kxEO5VE6?p=preview
单元格模板:
<div><text><i ng-class="grid.appScope.applyStatus(row.entity.status)"/></text></div>