html - Angular Material 将表格转换为小屏幕上的方框

Question

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

我的问题:是否可以在大屏幕上显示普通表格，并在小屏幕上显示页面时将表格信息从单行转换为盒状布局？像这样的事情:

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

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

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

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

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

<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

这就是我要做的 - 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;
      }
  }
});