ui 单元格模板需要动态 ng 样式

问题描述

在angularjs ui grid中，我有如下所示的单元格模板:

cellTemplate : "<div class="progress"> <div class="progress-bar progress-bar-info" ></div> </div>"

现在我需要动态更改 cellTemplate 的颜色类，即 progress-bar-info.基于列值(完整、不完整、进行中或失败)我需要在 cellTemplate 中有 progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger.我们如何才能实现它?

我尝试了以下模板，但出现错误:

cellTemplate: " <div class=\"progress margin-top-10\"> <div class=\"progress-bar\" ng-class=\"{progress-bar-success:{{row.entity.status}}==='complete', progress-bar-warning:{{row.entity.status}}==='incomplete', progress-bar-danger:{{row.entity.status}}==='fail'}\" ng-style=\"{width:'{{row.entity.val}}%'}\"></div> </div>",

错误如下:

angular.js:13920 错误:[$parse:syntax] 语法错误:令牌-"是意外的，在表达式 [{progress-bar-success:complete== 的第 10 列期待 [}]='complete', progress-bar-warning:complete==='incomplete', progress-bar-danger:complete==='fail'}] 开始于 [-bar-success:complete==='complete',progress-bar-warning:complete==='incomplete', progress-bar-danger:complete==='fail'}].

解决方案

你可以使用 ng-classng-class="{class1 : expression1, class2 : expression2}"

在你的情况下是这样的

这里是plunker.https://plnkr.co/edit/ydY6eTFE7PbJ4j8VcM0g?p=preview

In angularjs ui grid, I have the cell template as shown below :

cellTemplate :  "<div class="progress"> <div class="progress-bar progress-bar-info" ></div> </div>"

Now I need to dynamically change the color class for the cellTemplate i.e., progress-bar-info. Based column value (complete, incomplete, in progress or fail) I need to have progress-bar-success, progress-bar-info, progress-bar-warning, progress-bar-danger in the cellTemplate. How can we achieve it?

I tried the following template but it is giving error:

cellTemplate: " <div class=\"progress margin-top-10\"> <div class=\"progress-bar\"   ng-class=\"{progress-bar-success:{{row.entity.status}}==='complete', progress-bar-warning:{{row.entity.status}}==='incomplete', progress-bar-danger:{{row.entity.status}}==='fail'}\"  ng-style=\"{width:'{{row.entity.val}}%'}\"></div> </div>",

And the error is as follows :

angular.js:13920 Error: [$parse:syntax] Syntax Error: Token '-' is unexpected, expecting [}] at column 10 of the expression [{progress-bar-success:complete==='complete', progress-bar-warning:complete==='incomplete', progress-bar-danger:complete==='fail'}] starting at [-bar-success:complete==='complete', progress-bar-warning:complete==='incomplete', progress-bar-danger:complete==='fail'}].

解决方案

You can use ng-classng-class="{class1 : expression1, class2 : expression2}"

In your case something like this

<div class="progress-bar"
     ng-class="{'progress-bar-success':row.entity.status==='complete', 'progress-bar-warning':row.entity.status==='incomplete', 'progress-bar-danger':row.entity.status==='fail'}">
</div>

Here is the plunker.https://plnkr.co/edit/ydY6eTFE7PbJ4j8VcM0g?p=preview

这篇关于ui 单元格模板需要动态 ng 样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！