7
저는 ng-grid를 사용하여 업로드되는 파일 컬렉션을 표시합니다 (각 파일에는 고유 행이 있음).NG 그리드 행에 클래스 추가
파일 중 하나라도 업로드에 실패하면 해당 행을 수정하고 업로드에 실패했음을 나타내는 클래스를 추가하고 싶습니다.
클래스를 전체 행에 추가하는 방법은 무엇입니까?
A
답변
13
을 다시 읽어 만들기위한 @charlieftl합니다. 이 템플릿에서는 ng-class을 사용하고 데이터 바인딩을 통해 CSS 클래스를 동적으로 할당 할 수 있습니다.
간단한 예 :
HTML
<body ng-controller="MyCtrl">
<div class="grid" ng-grid="gridOptions"></div>
</body>
자바 스크립트
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.fileOneUploaded = true;
$scope.fileTwoUploaded = false;
$scope.gridData = [{fileName: 'File 1', size: 1000, isUploaded: $scope.fileOneUploaded },
{fileName: 'File 2', size: 2000, isUploaded: $scope.fileTwoUploaded }];
$scope.gridOptions = {
data: 'gridData',
rowTemplate: '<div style="height: 100%" ng-class="{red: !row.getProperty(\'isUploaded\')}">' +
'<div ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
'<div ng-cell></div>' +
'</div>' +
'</div>'
}
});
CSS
.grid {
width: 300px;
height: 100px;
border: solid 1px rgb(90,90,90);
}
.red {
background-color: red;
color: white;
}
+1
답변을 작성해 주셔서 감사합니다. 오늘 나는 내가 읽을 수 없다는 것을 배웠다. rowTemplate을 찾으려고하는 문서를 읽는 중 그냥 누락되었습니다. 다시 한번 감사드립니다. –
1
나는 바보입니다. 이에 대한 표준 구성 옵션은 rowTemplate입니다.
덕분에 나 워드 프로세서 : 당신은 행 템플릿을 사용할 필요가
템플릿에 'ng-class'를 설정하면 어떤 변수를 기반으로 설정 될 수 있습니다. 템플릿에 관한 github 위키에 대한 링크는 docs를 참조하십시오. – charlietfl
아, thanks mate. 나는 30 분 동안 문서를보고 있었는데, 어떻게'rowTemplate' 설정 옵션을 놓쳤는 지 모르겠습니다. –