шаблона пользовательского интерфейса ячейки необходим динамический стиль нг

Question

В angularjs Ui сетки, у меня есть шаблон ячейки, как показано ниже:

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

Теперь мне нужно динамически изменять класс цвета для CellTemplate то, progress-bar-info. Значение столбца (полное, неполное, незавершенное или неудачное). Мне нужно иметь progress-bar-success, progress-bar-info, progress-bar-warning, progress-bar-danger в cellTemplate. Как мы можем достичь этого?

Я попытался следующий шаблон, но он дает ошибку:

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

Вы можете использовать нг-класс нг-класс = "{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> 

Вот плункер. 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

Вы должны использовать директиву ngClass углам главного.

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

Answer 4

В случае, если вы хотите использовать свои собственные стили, просто убедитесь, что вы не определяете их как «.ui-grid-cell-contents». Это фактически работает для rowTemplate, но не для cellTemplate. Я видел несколько сообщений об этом, и это могло бы сэкономить вам некоторую проблему.