隐藏表头的AngularJs问题

<table>
  <thead ng-style="{'display': showHeader ? 'table-header-group' : 'none'}">
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in data">
      <td>{{item.field1}}</td>
      <td>{{item.field2}}</td>
      <td>{{item.field3}}</td>
    </tr>
  </tbody>
</table>

$scope.showHeader = true; // 控制表头的显示与隐藏

$scope.toggleHeader = function() {
  $scope.showHeader = !$scope.showHeader;
};

table {
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
}

thead {
  background-color: #f2f2f2;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #e6e6e6;
}