Angular Material 将 table 转换为小屏幕上的框

Question

我有一个 AngularJS 设计为 Angular Material 的网站。在一个屏幕上，我有一个 table，这就是我的问题，因为 Material 设计中的 table 并没有真正响应。

我的问题：是否可以在大屏幕上显示正常的table，而在小屏幕上显示页面时，将table信息从单行转换为类似框的布局？像这样：

Name   |   City   |   Gender
------------------------------
Alice  |   NY     |   f
Bob    |   LA     |   m

这个 table 在大屏幕上。以及较小屏幕上的以下设计。

Name   Alice
City   NY
Gender f
-------------
Name   Bob
City   LA
Gender m

我知道屏幕尺寸（xs、sm、...）的布局选项。

我试图在较小的屏幕上显示基于此代码的 tables，但是所有信息都在一行中。而不是每个属性一行。

<tr md-row ng-repeat="person in persons">
  <th md-cell>Name</th>
  <td md-cell>{{person.name}}</td>
  <th md-cell>State</th>
  <td md-cell>{{person.state}}</td>
  <th md-cell>Gender</th>                   
  <td md-cell>{{person.gender}}</td>
</tr>

结果：

Name Alice City NY Gender f
...

我的问题有什么好的解决办法吗？或者我不知道的另一种方法？

Answer 1

将 TR 添加到 TD 标签。

<tr md-row ng-repeat="person in persons">
      <th md-cell>Name</th>
      <td md-cell>
          <tr>{{person.name}}</tr>
      </td>
      <th md-cell>State</th>
      <td md-cell>{{person.state}}</td>
      <th md-cell>Gender</th>
      <td md-cell>{{person.gender}}</td>
</tr>

Answer 2

我不确定您是否可以使用 table 来做到这一点，但是 material 库提供了非常强大的 flexbox 功能，可以实现您所描述的响应式布局。似乎是一个有趣的问题，所以我开始尝试做一个 plunkr。

下面的html会调整布局和显示/隐藏各种标签，达到你想要的效果。查看plunkr时尝试更改浏览器大小，有一个断点会切换视图。

<div layout="row" flex hide show-gt-md>
  <div flex="20">Name</div>
  <div flex="20">City</div>
  <div flex="20">Gender</div>
</div>
<div ng-repeat="p in data" layout-gt-md="row" layout="column">
  <div flex="20" layout="row">
    <div flex="30" hide-gt-md>Name</div>
    {{p.name}}
  </div>
  <div flex="20" layout="row">
    <div flex="30" hide-gt-md>City</div>
    {{p.city}}
  </div>
  <div flex="20" layout="row">
    <div flex="30" hide-gt-md>Gender</div>
    {{p.gender}}
    </div>
</div>

https://plnkr.co/rvgwYMjlFazvM4SXyOtC

Answer 3

我就是这样做的 - CodePen

此解决方案非常灵活，可以更改用户信息。

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill>
  <div ng-if="showRow">
    <div ng-repeat="user in users">
      <div ng-if="$first">
        <div layout="row">
          <span flex ng-repeat="(key, value) in users[0]">
            {{key}}
          </span>
        </div>
        <md-divider></md-divider>
      </div>
      <div layout="row">
        <span flex ng-repeat="(key, value) in user">
          {{value}}
        </span>
      </div>
    </div>
  </div>

  <div display="column" ng-if="showColumn">
    <div ng-repeat="user in users">
      <div ng-repeat="(key, value) in user" layout="row">
        <span flex>{{key}}</span>
        <span flex>{{value}}</span>
      </div>
      <md-divider></md-divider>
    </div>
  </div>
</div>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages'])

.controller('AppCtrl', function($scope, $mdMedia, $window) {
  $scope.users = [
    {Name: "Alice", City: "NY", Gender: "f"},
    {Name: "Bob", City: "LA", Gender: "m"}
  ];
  $scope.showColumn = false;
  $scope.showRow = true;

  display();

  angular.element($window).bind("resize", function() {
    display();
    $scope.$apply();
  });

  function display () {
     if ($mdMedia("gt-xs")) {
        $scope.showColumn = false;
        $scope.showRow = true;
      }
      else if ($mdMedia("xs")) {
        $scope.showColumn = true;
        $scope.showRow = false;
      }
  }
});

Angular Material 将 table 转换为小屏幕上的框

Angular Material transform table to boxes on small screens

html

html-table

angularjs

angular-material