javascript - 如何在使用重复 Angular Material 时根据屏幕尺寸隐藏一些表格列

Question

我有一个包含多列和行的表。在小屏幕(手机)上查看时，我想隐藏其中一些列，否则显示所有列。我的表中的数据是使用重复填充的。当我在多个地方重复使用该表时，我想保留重复，因为列数和行数不同。

<table md-table class="md-data-table" id="data-table">
            <thead md-head md-order="gridCtrl.gridModel.orderBy">
            <tr md-row>
                <th md-column ng-repeat="header in gridCtrl.gridModel.headers" md-order-by="fields[{{$index}}].value">
                    {{header.title}}
                </th>
            </tr>
            </thead>
            <tbody md-body>
            <tr md-row ng-repeat="item in gridCtrl.gridModel.items | orderBy: gridCtrl.gridModel.orderBy | limitTo: gridCtrl.gridModel.itemsPerPage : (gridCtrl.gridModel.firstPage -1) * gridCtrl.gridModel.itemsPerPage">
                <td md-cell ng-repeat="field in item.fields">
                    <div ng-if="gridCtrl.isLink(field)">
                        <h4 class="blue-link" id="gridFieldString{{field.value | idfy}}" ng-click="gridCtrl.click($event, field)">
                            {{field.value}}
                        </h4>
                    </div>
                    <div ng-if="!gridCtrl.isLink(field)">{{field.value}}</div>
                </td>
            </tr>
            </tbody>
        </table>

Answer 1

你可以使用

window.screen.availHeight
window.screen.availWidth

获取当前分辨率。

然后添加具有屏幕分辨率的 ng-hide 或

<tr md-row ng-hide="window.screen.availHeight < 500 && window.screen.availWidth <200">