UI 세포 템플릿은 아래 그림과 같이 내가 셀 템플릿을 가지고, AngularJS와 UI 그리드에서 동적 NG 스타일

Question

이 필요합니다. 기반 열 값 (완료, 불완전, 진행 중 또는 실패) 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

당신은 NG 수준의 NG 수준 = 사용할 수 있습니다 "{expression1에, Class2의 : 클래스 1을이 expression2}"이

<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가 있습니다. 당신은 당신이 실제로 rowTemplate 작동하지만 cellTemplate은 ".ui-그리드 셀 내용"로 정의 해달라고해야, 자신의 스타일을 사용하고자 할 경우 https://plnkr.co/edit/ydY6eTFE7PbJ4j8VcM0g?p=preview

Answer 2

는 컨트롤러이 추가; 보기에

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

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

    $scope.dynamicClass = "progress"; 

}); 

: 당신은 angulars ngClass 지시어를 사용한다

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


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

Answer 3

:

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

는 CSS를 정의합니다.

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

Answer 4

. 나는 이것에 대해 여러 게시물을 보았고 그것은 당신에게 어떤 문제를 줄 수 있었다.