更改数据时，ui-grid 自定义指令高度未更新答案

【问题标题】：ui-grid custom directive height not getting updated when i change the data更改数据时，ui-grid 自定义指令高度未更新
【发布时间】：2017-07-13 05:55:18
【问题描述】：

我有一个 UI-grid 自定义指令，我正在更改网格的高度，条件是如果它有超过 10 行，我正在修复高度，这是以下代码

scope.gridOptions.data = scope.data;
if (scope.data.length > 10) {
        scope.gridOptions.minRowsToShow = 10;
      } else {
        scope.gridOptions.minRowsToShow = scope.data.length;
      }
   scope.gridOptions.virtualizationThreshold =scope.gridOptions.minRowsToShow;

默认情况下它工作正常，但是当我更改数据时，高度没有更新。这是我的小伙伴

Plunker Example Sample

【问题讨论】：

我没有看到您在 plunker 中更新 minRowsToShow 或 virtualizationThreshold 。 css也不见了。请更新您的代码以查看它是否可以作为here
我已经添加了css，但是当我有超过 10 条记录时，即使它只显示 10 条记录，如果我有超过 10 条记录，我想修复 hieght

标签： angularjs angularjs-directive angularjs-scope angular-ui-grid ui-grid

【解决方案1】：

1) 使用条件语句将 getTableHeight() 中的最大行数限制为 10：

scope.getTableHeight = function() {

  // limit table height to a maximum of 10 rows
  var tableRows = (scope.data.length > 10) ? 10 : scope.data.length;

  var rowHeight = 30; // your row height
  var headerHeight = 30; // your header height
  var height = "";
  if (scope.gridOptions.enablePaginationControls) {
    height = "auto";
  } else {
    height = (tableRows * rowHeight + headerHeight) + "px";
  }

  return {
    height: height
  };
};

2) 删除覆盖高度的类：

/* .ui-grid, .ui-grid-viewport {
    height: auto !important;
} */

演示：https://plnkr.co/edit/baleHFkA85jCRI2SDSqO?p=preview

其他注意事项：

customgrid 不应使用自闭标签，而是：<customgrid></customgrid>
virtualizationThreshold 应该采用数字而不是布尔值

【讨论】：

还要注意自己的界限，一眼就能看到代码if (scope.enablePagination && newVal.length < 10)，后跟else if scope.enablePagination && newVal.length > 10)。这不包括newVal.length = 10 的情况。不知道这是否重要，只是我注意到的一点
谢谢你用这么好的方式解释我:)
很高兴有帮助