ui cell template needs dynamic ng style

问题

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

回答1:

You can use ng-class ng-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

回答2:

Add this in you controller ;

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

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

  $scope.dynamicClass = "progress";

});

In your view :

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

Define css :

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


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

回答3:

You should use angulars ngClass directive.

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

回答4:

In case you do want to use your own styles, just be sure you dont define them as ".ui-grid-cell-contents" It actually works for rowTemplate but not for cellTemplate. I have seen several posts about this and it could save you some trouble.

来源：https://stackoverflow.com/questions/40170055/ui-cell-template-needs-dynamic-ng-style