Angular Material - 使用隐藏属性

Question

我在 table 上使用 angular material 提供的 hide- 属性时遇到问题，我试图在某些断点处隐藏列。

我有一个非常简单的 table 示例，其中 header 和行单元格使用隐藏属性，如下所示：

<md-card layout="row">
      <table class="main-table" layout-fill flex layout="column">
        <thead flex>
          <tr layout="row">
            <th flex hide-sm>Status</th>
            <th flex hide-md>Value</th>
            <th flex hide-md>Type</th>
            <th flex hide-sm>Action</th>
            <th flex hide-md>Card Number</th>
            <th flex>Customer</th>
            <th flex>Contact</th>
          </tr>
        </thead>
      <tbody flex>
        <tr layout="row" ng-repeat="message in vm.messageListFailures" class="pointer">
          <td flex hide-sm>
            <span class="status-label message-status-failed">Never Sent</span>
          </td>
          <td flex hide-md>
            £3500
          </td>
          <td flex hide-md>
            Bla
          </td>
          <td flex hide-sm>
            Added
          </td>
          <td flex hide-md>
            12345678910
          </td>
          <td flex>
            Mr John Smith
          </td>
          <td flex>
            j.smith@somewhere.com
          </td>
        </tr>
      </tbody>
    </table>
  </md-card>

工作codepen

当我在 codepen 示例中调整预览窗格大小时，列不会隐藏在中小断点处。我还注意到 table 实际上并没有填充卡片的可用宽度，我向 table 元素添加了 layout-fill 和 flex 但这没有区别。

我在这里错过了什么？

谢谢

Answer 1

参考以下block.it作品，

 <tr layout="row">
        <th  flex class="ng-hide">Status</th>
        <th  flex  class="ng-hide">Value</th>
        <th  flex class="ng-hide">Type</th>
        <th  flex  class="ng-hide">Action</th>
        <th  flex class="ng-hide">Card Number</th>
        <th  flex>Customer</th>
        <th flex>Contact</th>
  </tr>

Angular Material - 使用隐藏属性

Angular Material - use of hide attributes

angularjs

angular-material