AngularJS ng-Grid ve ngGridFlexibleHeightPlugin beklediğim gibi çalışmıyor

Question

Bazı dinamik içeriği göstermek için Angular ng-grid kullanmaya çalışıyorum. Izgarada 0 - 25 satır olacaktır. Minimum boyuta sahip olmak istiyorum ve sonra diziye eklenen öğeler olarak ng-grid otomatik yüksekliğini ayarla. Bazı nedenlerden dolayı otomatik boyut 6-7 ürün ekledikten sonra durur (hatta çözünürlüğünüze bağlı gibi görünür).

Herkes yardımcı olabilir mi? Neyi kaçırıyorum? Aşağıda bir Plunker var, bu sorunu gösterir.

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

Answer 1

kod körük eklenti bir modifikasyonudur. Kılavuz verilerindeki öğelerin sayısını kontrol ederek ve buna bağlı olarak yüksekliği hesaplayarak çalışır. Eklentiye gönderilen seçenekler satır yüksekliği ve başlık yüksekliğidir.

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

yine ben öneri ng-ızgara kullanarak ve html doğrudan (Kullanım DIV'leri, sütun genişliği biçimlendirme, stiller, vb ...) düzeninizi oluşturmak olmaz sorunlar yaşıyorsanız. Ardından, yeni düzeninizi $ kapsamınızı kullanarak doldurun. Değişkenler, modeller ve ng tekrarı arasında ihtiyacınız olan her şeyi yapabilmelisiniz.

Answer 3

Bu kod parçasını kullanarak stil sayfasındaki sorunumu çözdüm. Eklentiyi devre dışı bıraktım ama her iki şekilde de çalışıyor.

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

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

Ben birisi