Question

我正在尝试使用Angular ng-grid来显示一些动态内容。网格将有0到25行。我希望有一个最小尺寸，然后让ng-grid自动调整高度，因为项目会添加到数组中。由于某些原因，添加6-7项后自动尺寸停止（它甚至看起来取决于你的分辨率）。

有人可以帮忙吗？我错过了什么？我下面有一个Plunker，显示了这个问题。

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

Answer 1

如果您仍然遇到问题，我建议不要使用ng-grid并直接在html中创建您的布局（使用DIV，列宽格式，样式等...）。然后使用$ scope填充新布局。在变量，模型和ng-repeat之间，您应该能够完成所需的一切。

Answer 2

下面的代码是对插件的修改。它的工作原理是检查网格数据中的项目数量并根据该数据计算高度。传递给插件的选项是行高和标题高度。

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 3

我发现在样式表上使用这段代码解决了我的问题。我禁用了插件，但无论如何都可以。

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

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

我希望它有助于某人

AngularJS ng-Grid和ngGridFlexibleHeightPlugin无法正常工作

3 个答案: