Угловой материал - использование атрибутов скрытия

У меня проблема с использованием атрибутов hide-, предоставленных с угловым материалом в таблице, где я пытаюсь скрыть столбцы в определенных точках останова.

У меня есть очень простой пример таблицы, в которой ячейки заголовка и строки используют такие атрибуты скрытия:

<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>
            [email protected]
          </td>
        </tr>
      </tbody>
    </table>
  </md-card>

Рабочий codepen

Когда я изменяю размер панели предварительного просмотра в моем примере кода, столбцы не скрываются на малых и средних точках останова. Также я заметил, что таблица фактически не заполняет доступную ширину карты, я добавил layout-fill и flex к элементу таблицы, но это не имеет значения.

Что мне здесь не хватает?

Спасибо


angularjs angular-material
person mindparse    schedule 21.12.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

обратитесь к следующему блоку. он работает,

 <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>
person Nitin Dhomse    schedule 21.12.2015
comment
Спасибо, что сработало! Кажется, что документы и примеры, которые я видел, используют атрибуты, а не имена классов. Я использую версию 0.11.2, может, последняя версия 1.0+ изменилась? - person mindparse; 21.12.2015