Я пытаюсь использовать Angular ng-grid для отображения некоторого динамического содержимого. Сетка будет иметь 0-25 строк. Я хочу иметь минимальный размер, а затем автоматическую настройку ng-grid настраивать высоту по мере добавления элементов в массив. По какой-то причине автоматический размер останавливается после добавления 6-7 элементов (это даже зависит от вашего разрешения).
Может ли кто-нибудь помочь? Что мне не хватает? У меня есть Plunker ниже, который показывает проблему.
Если у вас все еще есть проблемы, я бы предложил не использовать ng-grid и создать ваш макет непосредственно в html (используйте DIVs, форматирование ширины столбцов, стили и т.д.). Затем залейте свой новый макет, используя ваш $scope. Между переменными, моделями и ng-repeat вы должны будете делать все, что вам нужно.
Ниже приведен код модификации плагина. Он работает, проверяя количество элементов в данных сетки и вычисляя высоту на основе этого. Параметры, переданные плагину, - это высота строки и высота заголовка.
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);
};
};
Я нахожу, что использование этого фрагмента кода в таблице стилей решает мою проблему. Я отключил плагин, но он работает в любом случае.
.ngViewport.ng-scope{
height: auto !important;
overflow-y: hidden;
}
.ngTopPanel.ng-scope, .ngHeaderContainer{
width: auto !important;
}
.ngGrid{
background-color: transparent!important;
}
Я надеюсь, что это поможет кому-то