Hinzufügen einer Klasse zur ng-Grid-Zeile

Ich verwende ng-grid, um eine Sammlung von Dateien anzuzeigen, die hochgeladen werden (jede Datei hat ihre eigene Zeile).Hinzufügen einer Klasse zur ng-Grid-Zeile

Wenn eine der Dateien nicht hochgeladen werden kann, möchte ich diese Zeile ändern und eine Klasse hinzufügen, um anzuzeigen, dass sie nicht hochgeladen werden konnte.

Wie würde ich eine Klasse zu einer ganzen Zeile hinzufügen?

Quelle

2013-10-29 robert.bo.roth

können Sie Ihre eigenen Vorlagen festlegen ... dann im Vorlagensatz 'ng-class' basierend auf welcher Variablen Sie auch brauchen. Siehe Dokumentation für Link zu Github Wiki bezüglich Vorlagen – charlietfl

Ah, danke Kumpel. Ich habe 30 Minuten lang die Dokumente durchgesehen, ich bin mir nicht sicher, wie ich die Konfigurationsoption 'rowTemplate' vermisst habe. –

Sie haben eine Reihe Vorlage zu verwenden. In dieser Vorlage können Sie ng-class verwenden und dynamisch eine CSS-Klasse durch Datenbindung zuweisen.

Ein einfaches Beispiel:

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

Quelle

2013-10-29 21:38:01 pmoule

Danke für das Schreiben der Antwort. Heute habe ich gelernt, dass ich nicht lesen kann. Liest die Dokumente durch, die versuchen, das rowTemplate zu finden, und es gerade vermisst :) Nochmals vielen Dank. –

Ich bin dumm. Dafür gibt es eine Standard-Konfigurationsoption, nämlich rowTemplate.

Vielen Dank, dass Sie mich @charlieftl die Dokumentation neu zu lesen :)

Quelle

2013-10-29 20:43:45

Hinzufügen einer Klasse zur ng-Grid-Zeile

Antwort

Verwandte Themen