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

Question

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

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

现在我需要动态更改 cellTemplate 的颜色 class，即 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

在你的控制器中添加这个；

 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 2

你应该使用 angularjs ngClass 指令。

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

Answer 3

你可以使用 ng-class ng-class="{class1：表达式 1，class2：表达式 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>

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

Answer 4

如果您确实想使用自己的样式，请确保不要将它们定义为“.ui-grid-cell-contents” 它实际上适用于 rowTemplate 但不适用于 cellTemplate。我看过很多关于这个的帖子，它可以为你省去一些麻烦。

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

ui cell template needs dynamic ng style

twitter-bootstrap

angularjs

angular-ui

angular-ui-grid