AngularJS ng-Grid und ngGridFlexibleHeightPlugin funktioniert nicht so wie ich es erwarte

Question

Ich versuche angular ng-grid zu verwenden, um dynamischen Inhalt anzuzeigen. Das Raster wird 0 bis 25 Zeilen haben. Ich möchte eine Mindestgröße haben und dann muss das ng-Raster automatisch die Höhe anpassen, wenn Elemente zum Array hinzugefügt werden. Aus irgendeinem Grund stoppt die automatische Größe nach dem Hinzufügen von 6-7 Elementen (es scheint sogar von Ihrer Auflösung abhängig zu sein).

Kann jemand helfen? Was vermisse ich? Ich habe unten einen Plunker, der das Problem zeigt.

http://plnkr.co/edit/frHbLTQ68GjMgzC59eSZ?p=preview

Answer 1

Der Code Balg ist eine Modifikation an dem Plugin. Es funktioniert, indem die Anzahl der Elemente in den Rasterdaten überprüft und die Höhe basierend darauf berechnet wird. Die Optionen, die an das Plugin übergeben werden, sind die Höhe der Zeilen und die Kopfhöhe.

ngGridCustomFlexibleHeightPlugin = function (opts) { 
    var self = this; 
    self.grid = null; 
    self.scope = null; 
    self.init = function (scope, grid, services) { 
     self.domUtilityService = services.DomUtilityService; 
     self.grid = grid; 
     self.scope = scope; 
     var recalcHeightForData = function() { setTimeout(innerRecalcForData, 1); }; 
     var innerRecalcForData = function() { 
      var gridId = self.grid.gridId; 
      var footerPanelSel = '.' + gridId + ' .ngFooterPanel'; 
      var extraHeight = self.grid.$topPanel.height() + $(footerPanelSel).height(); 
      var naturalHeight = (grid.data.length - 1) * opts.rowHeight + opts.headerRowHeight; 
      self.grid.$viewport.css('height', (naturalHeight + 2) + 'px'); 
      self.grid.$root.css('height', (naturalHeight + extraHeight + 2) + 'px'); 
      // self.grid.refreshDomSizes(); 
      if (!self.scope.$$phase) { 
       self.scope.$apply(function() { 
        self.domUtilityService.RebuildGrid(self.scope, self.grid); 
       }); 
      } 
      else { 
       // $digest or $apply already in progress 
       self.domUtilityService.RebuildGrid(self.scope, self.grid); 
      } 
     }; 
     scope.$watch(grid.config.data, recalcHeightForData); 

    }; 
}; 

Answer 2

Wenn Sie immer noch Probleme würde ich Vorschlag nicht das ng-Raster verwendet, und erstellen Sie Ihr Layout direkt in HTML (Verwendung DIVs, Spaltenbreite Formatierung, Stile, etc ...). Füllen Sie dann Ihr neues Layout mit Ihrem $ scope aus. Zwischen Variablen, Modellen und ng-repeat sollten Sie alles tun können, was Sie brauchen.

Answer 3

Ich finde mit diesem Stück Code auf dem Stylesheet mein Problem gelöst. Ich habe das Plugin deaktiviert, aber es funktioniert so oder so.

.ngViewport.ng-scope{ 
    height: auto !important; 
    overflow-y: hidden; 
} 

.ngTopPanel.ng-scope, .ngHeaderContainer{ 
    width: auto !important; 
} 
.ngGrid{ 
    background-color: transparent!important; 
} 

Ich hoffe, dass es jemand