Angular ui grid (ng-grid) 3: showHeader isn't

问题:

I'm playing around with this angular plugin. Here's my issue - I'm setting the grid with no headers as default. When I want to set the grid header back, it doesn't work by changing the gridOptions.showHeader attribute. Here's my toggle code (I've added the refresh() once I saw it doesn't work without it but the refresh() doesn't help as well):

  $scope.toggleHeader = function(){
    $scope.gridOptions.showHeader = !$scope.gridOptions.showHeader;  
    $scope.gridApi.grid.refresh();
  }

Here's a plnkr: http://plnkr.co/edit/eEzSH5hKUTZFbkxiruSt

Anyway to toggle the grid's header on and off?

EDIT: In order to show the motivation of such a change, I've modified my code a bit to use watchers on some gridStatus variable (which could be anything - in my case it's minimize):

http://plnkr.co/edit/1fX6ZuqUt7xANO1P7MMG

回答1:

A number of the gridOptions aren't dynamic - they're set on initialisation and then not re-evaluated. This is part of the aim of the grid to minimise the number of watchers (and therefore maximise performance) Refer: https://github.com/angular-ui/ng-grid/issues/1819

The short answer is that you can't easily change this once the grid renders - you either have a grid with headers or one without. You can, however, re-render the grid. The easiest way to do this is to put an ng-if on your grid directive, and then toggle it, which would look something like:

<div ui-grid="gridOptions" ng-if="refresh"></div> and function refreshGrid() { $scope.refresh = false; $timeout(function() { $scope.refresh = true; }); };