Question

我有一个像这样使用的简单网格：

 <div id="planningGridDiv" 
    class="gridPatientContent"

    style="height: 450px;min-height: 300px;"

    ng-style="{height: showScores ? '150px': '450px'}"

    ui-grid-resize-columns
    ui-grid-selection
    ui-grid-cellNav
    ui-grid-pinning

    ui-grid="myData"
    class="grid">

  </div>

但是当showScores为真且高度从450到150 px时，网格本身不会缩小。

第一个容器看到它的高度发生了变化，但这部分没有：

<div role="grid" ui-grid-one-bind-id-grid="'grid-container'" class="ui-grid-render-container ng-isolate-scope ui-grid-render-container-body" ng-style="{ 'margin-left': colContainer.getMargin('left') + 'px', 'margin-right': colContainer.getMargin('right') + 'px' }" ui-grid-render-container="" container-id="'body'" col-container-name="'body'" row-container-name="'body'" bind-scroll-horizontal="true" bind-scroll-vertical="true" enable-horizontal-scrollbar="grid.options.enableHorizontalScrollbar" enable-vertical-scrollbar="grid.options.enableVerticalScrollbar" aria-multiselectable="true" id="1490734763451-grid-container" style="margin-left: 180px; margin-right: 80px;">

我找不到任何关于doc或堆栈溢出的解决方案，但在我看来它应该。我可以使用一些帮助来解决一些问题。

Answer 1

仅供参考，我在另一个stackoverflow问题上找到了解决方案，但我稍微改了一下以满足我的需求：

 $scope.showScoreDiv = function()
{
    $scope.showScores = !$scope.showScores;

    $timeout(function(){
         $scope.gridApi.grid.handleWindowResize();
    }, 1); 
};

因此，主要想法是通过网格div上的ng-style更改高度，当您触发事件时，showScores = true调用此showScoreDiv()，您必须调用gridApi.grid.handleWindowResize() }。超时就是在调用handleWindowResize()之前给div设置好空间的一些时间。

ui-grid ng-style动态高度

1 个答案: