Question

我是AngularJS的新手，但我的控制器能够很好地处理应用程序并返回数据。但是，在使用响应式Web设计时，我在基于设备的表的初始显示中显示不同的信息。

例如，我有7列（A-G）返回数据。当我在大型显示器（PC）上显示表格时，我想显示所有列。但是，平板电脑（col-sm）可能会显示A，B，G，C列，而手机（col-xs）可能会显示B列和G列。

当用户点击一列时，我会显示一条记录的所有数据，但同样，它会针对该设备进行格式化。我发现HTML中有大量的重复，为不同的屏幕尺寸创建表格和布局。因此，还有大量数据被发送到便携式设备（手机，平板电脑），这些数据会占用不会显示的项目的传输时间。

我想知道包含格式控制的最佳方法，以便只发送每个平台（手机，平板电脑等）的信息？这是否正确，因为当屏幕旋转时，您需要两种尺寸。我很高兴发送2种尺寸，因为纵向/横向变化是有意义的，但不是真正的大桌面尺寸。

人们如何开发应用程序来处理这个问题？此示例显示了2个表，但我希望只有1个基于屏幕大小。

示例Index.html

<!doctype html>
<html lang="en" ng-app="MyApp">
<head>
    <meta charset="utf-8">
    <title>MyApp</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.min.js"></script>

    <script src="MyApp.js"></script>
</head>

<body ng-controller="Ctrl">

<div>       <!-- Phones, Show 2 Data Columns -->
    <div class="modal-dialog">
        <div class="modal-content">
            <table class="table table-hover" id="PhoneTable">
                <thead>
                    <tr>
                        <th class="col-xs-8">Col B</th>
                        <th class="col-xs-4">Col G</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="Row in Rows">
                        <td>{{Row.B}}</td>
                        <td>{{Row.G}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div>       <!-- Tablets, Show 4 Data Columns -->
    <div class="modal-dialog">
        <div class="modal-content">
            <table class="table table-hover" id="PhoneTable">
                <thead>
                    <tr>
                        <th class="col-sm-3">Col A</th>
                        <th class="col-sm-3">Col B</th>
                        <th class="col-sm-3">Col G</th>
                        <th class="col-sm-3">Col C</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="Row in Rows">
                        <td>{{Row.A}}</td>
                        <td>{{Row.B}}</td>
                        <td>{{Row.G}}</td>
                        <td>{{Row.C}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>

然后是MyApp.js

var App = angular.module('MyApp', []);

App.controller('Ctrl', function ($scope)
{
    $scope.Rows = [
        { "A":  1, "B":  2, "C":  3, "D":  4, "E":  5, "F":  6, "G":  7 },
        { "A": 11, "B": 12, "C": 13, "D": 14, "E": 15, "F": 16, "G": 17 },
        { "A": 21, "B": 22, "C": 23, "D": 24, "E": 25, "F": 26, "G": 27 }
    ];
});

Answer 1

为了减少代码重复，我使用了.visible-xs和.hidden-xs的组合来显示/隐藏较小显示器上的列。

<div>       <!-- Tablets, Show 4 Data Columns -->
    <div class="modal-dialog">
        <div class="modal-content">
            <table class="table table-hover" id="PhoneTable">
                <thead>
                    <tr>
                        <th class="col-sm-3 hidden-xs">Col A</th>
                        <th class="col-sm-3">Col B</th>
                        <th class="col-sm-3">Col G</th>
                        <th class="col-sm-3 hidden-xs">Col C</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="Row in Rows">
                        <td class="hidden-xs">{{Row.A}}</td>
                        <td>{{Row.B}}</td>
                        <td>{{Row.G}}</td>
                        <td class="hidden-xs">{{Row.C}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

AngularJS / Bootstrap在不同的屏幕尺寸上显示不同的列

1 个答案: