Question

我有一个AngularJS网站，其中包含Angular Material设计。在一个屏幕上，我有一张桌子，这就是我的问题，因为材料设计中的表格并没有真正响应。

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

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

此表位于大屏幕上。以下设计在较小的屏幕上。

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

我不确定您是否可以使用表格进行此操作，但材料库提供了非常强大的功能，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 2

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

Answer 3

在TD标签上添加TR。

<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>

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

3 个答案: