각도 ui 격자 행 조건에 따른 템플릿 색상

Question

일부 조건에 따라 각도 ui 격자의 행 색상을 변경해야합니다.

rowTemplate: '<div style="height: 100%" ng-class="{red: row.getProperty(\'viewed\') < 1}"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' + 
      '<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>' + 
      '<div ng-cell></div>' + 
      '</div></div>', 

을 같이 대상이

Answer 1

내가 모두 NG 그리드 및 UI 그리드에서 생각하는 각 UI 그리드에서 동일한을 달성하는 방법 NG 그리드 달성된다, 당신은 사용할 수 있습니다

cellTemplate: '<div style="height: 100%" ng-class="{red: row.getProperty(\'viewed\') < 1}"><div ng-style="{\'cursor\': row.cursor}" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' + 
     '<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ngVerticalBarVisible: !$last}"> </div>' + 
     '<div ng-cell></div>' + 
     '</div></div>'， 

Answer 2

ui-grid api : http://ui-grid.info/docs/#/api/ui.grid.class:GridRow에 따르면 "열람 한"행의 속성으로 표시되지 않습니다. 그러나 객체의 속성을 평가하려는 경우 (데이터가 객체의 배열이라고 가정 할 때) 다음과 같이 보일 것입니다.

당신은

.ui-grid-row .ui-grid-cell { 
    background-color: inherit !important; 
} 

당신의 스타일을 착색 기본 행을 무시하기 위해 CSS를이 필요합니다 :

.my-style-1 { 
    background-color: #ff0000 !important; 
} 
.my-style-2 { 
    background-color: #ffffff !important; 
} 
.my-style-3 { 
    background-color: #0000ff !important; 
} 

rowTemplate :

rowTemplate: '<div ng-class="{\'my-style-1\':row.entity.Field1===1, \'my-style-2\':row.entity.Field1===2, \'my-style-2\':row.entity.Field1===3}" <div ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ui-grid-cell></div></div>' 

//example data 
data:[{'Field1': 1, 'Field2': 'abc', 'Field3': 'def'}, 
     {'Field1': 2, 'Field2': 'hij', 'Field3': 'klm'}, 
     {'Field1': 3, 'Field2': 'nop', 'Field3': 'qrs'}]; 

Answer 3

대신 cellTemplate 언급 다른 anwser에서는를 사용할 수도 있습니다.:

cellClass: function (grid, row) { 
    return row.entity.age < 18 ? 'young' : 'old'; 
};