Question

我正在使用angularjs 1.5.0 with angular ui grid 3.1.1。当我在控制器主体中分配gridOptions（传递给grid指令）对象时，如下所示：

$scope.gridOptions = {
      data: [{"mock2": 1, "mock1": 2}, {"mock2": 10, "mock1": 22} ]
    };

HTML：

    <div ui-grid="gridOptions"></div>

按预期显示表格。但是当我尝试更改$ scope.on：

中的数据时

$scope.$on('update', function (event, passedFromBroadcast) {
      $scope.gridOptions.data= [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;
    });

它只呈现表格的框架，当包括分页时，它也会呈现与分页相关的控件 - 但不会呈现内容本身。仅在我调整浏览器窗口大小后才会显示内容（行和列标题）。

当$ scope.on内的数据发生变化时，为什么不使用angular-ui网格更新表内容？

如何手动更新角度ui网格表？ 我已经尝试过的事情：

$scope.gridApi.core.handleWindowResize(); // Does not work
$scope.gridApi.core.refresh(); // Does not work
$timeout(function(){$scope.gridOptions.data= [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;}) // Does not work

Answer 1

当gridOptions.data长度在更新后没有变化时，这是一个已知的错误，建议的解决方案是清除数据并使用$ timeout刷新它

$scope.$on('update', function (event, passedFromBroadcast) {
  $scope.gridOptions.data = null
  $timeout(function(){
    $scope.gridOptions.data = [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;
  });
});

Answer 2

此代码存在两个问题，但仅在浏览器窗口调整大小后显示表内容的原因是缺少定义宽度和高度的css类，基本（工作）示例：

    .grid {
      width: 500px;
      height: 250px;
     }

并在HTML中：

    <div class="grid" ui-grid="gridOptions"></div>

其他问题（本主题中其他人提到：

分配gridOption字段（数据但 columnDefs ）必须在$ timeout内完成，另外在此之前需要清除data和columnDefs。否则它的更改可能不会变得可见，并且表内容和标题将保持不变（ui-grid中的已知错误，如@maurycy所述）

Answer 3

在$interval方法中放置窗口调整大小处理程序在gridOptions.onRegisterApi方法中已经适用于我：

var gridResizeHandlerInterval; 

$scope.gridOptions = {
  ..., // etc.
  onRegisterApi: function(gridApi) {
    ctrl.gridApi = gridApi;

    gridResizeHandlerInterval = $interval( function() {
      $scope.gridApi.core.handleWindowResize();
    }, 10, 500); 
  }
};

然后确保整理并取消控制器被破坏时的间隔：

$scope.$on('$destroy', function() {
  $interval.cancel(gridResizeHandlerInterval);
});

希望这可以帮助你...

Answer 4

您可以尝试以下方法：

$scope.$on('update', function (event, passedFromBroadcast) {
  $scope.gridOptions.data.length = 0;
  $timeout(function(){
    $scope.gridOptions.data = [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;
  });
});

希望这有帮助！

除非重新调整浏览器窗口的大小，否则Angular ui网格不会显示内容

4 个答案: