UI细胞模板需要动态纳克风格

Question

在angularjs UI格，我有电池模板，如下图所示：

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 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'}]. 

Answer 1

可以使用纳克级 纳克级= “{1类：表达式1，等级2：表达式2}”

在你的情况是这样的

<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> 

这是抢劫犯。 https://plnkr.co/edit/ydY6eTFE7PbJ4j8VcM0g?p=preview

Answer 2

在您控制器添加这一点;

var myApp = angular.module('myApp'); 

myApp.controller('clickCtrl', function($scope){ 

    $scope.dynamicClass = "progress"; 

}); 

在你看来：

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

定义CSS：

.progress{ 
    background-color: orange !important; 
} 


.done{ 
    background-color: green!important; 
} 

Answer 3

您应该使用angulars ngClass指令。

https://docs.angularjs.org/api/ng/directive/ngClass

Answer 4

如果你想用你自己的风格，只是确保你不将它们定义为“的.ui-网格单元，内容是”它实际上适用于rowTemplate而不是cellTemplate。我已经看过几篇关于这方面的文章，它可以为您节省一些麻烦。