向ng-grid行添加一個類

我正在使用ng-grid來顯示正在上傳的文件的集合（每個文件都有自己的行）。向ng-grid行添加一個類

如果其中一個/任何文件無法上傳，我想修改該行並在其上放置一個類以顯示上傳失敗。

我該如何去添加一個類到整個行？

來源

2013-10-29 robert.bo.roth

可以設置你自己的模板...然後在模板中設置'ng-class'根據你需要的任何變量來監視。請參閱文檔鏈接到Github維基有關模板 – charlietfl

啊，謝謝隊友。我正在瀏覽像30分鐘的文檔，我不知道我錯過了'rowTemplate'配置選項。 –

你必須使用一排模板。在此模板中，您可以使用ng-class並通過數據綁定動態分配CSS類。

一個簡單的例子：

HTML

<body ng-controller="MyCtrl"> 
    <div class="grid" ng-grid="gridOptions"></div> 
</body>

的JavaScript

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; 
}

來源

2013-10-29 21:38:01 pmoule

感謝您編寫答案。今天我瞭解到我無法閱讀。正在閱讀文檔，試圖找到rowTemplate，只是不知道它:) 再次感謝。 –

我很笨。這有一個標準配置選項，即rowTemplate。

感謝@charlieftl讓我重新閱讀文檔:)

來源

2013-10-29 20:43:45

向ng-grid行添加一個類

回答

相關問題