AngularJS/Bootstrap在不同的屏幕大小上显示不同的列
我是AngularJS新手，但我的控制器能够很好地处理应用程序和返回数据。但是，在处理响应性web设计时，我会在基于设备的表格初始显示中显示不同的信息 例如，返回的数据有7列（A-G）。当我在大屏幕（PC）上显示表格时，我希望显示所有列。但是，平板电脑（sm列）可能显示a、B、G、C列，而手机（xs列）可能显示B和G列 当用户单击一列时，我会显示一条记录的所有数据，但同样，它是为设备格式化的。我发现我在为不同的屏幕大小创建表格和布局时，HTML中有大量的重复。因此，也有大量数据被发送到便携式设备（电话、平板电脑）上，这些数据会占用不显示的项目的传输时间 我想知道最好的方式包括格式控制，以便只发送每个平台（手机、平板电脑等）的信息？这是否正确，因为当屏幕旋转时，需要两种尺寸。我很乐意同时发送两种尺寸，因为纵向/横向变化是有意义的，但不是真正的大桌面尺寸 人们是如何开发应用程序来处理这个问题的？这个示例显示了2个表，但我只想根据屏幕大小显示1个表 示例Index.htmlAngularJS/Bootstrap在不同的屏幕大小上显示不同的列,angularjs,twitter-bootstrap-3,Angularjs,Twitter Bootstrap 3,我是AngularJS新手，但我的控制器能够很好地处理应用程序和返回数据。但是，在处理响应性web设计时，我会在基于设备的表格初始显示中显示不同的信息 例如，返回的数据有7列（A-G）。当我在大屏幕（PC）上显示表格时，我希望显示所有列。但是，平板电脑（sm列）可能显示a、B、G、C列，而手机（xs列）可能显示B和G列 当用户单击一列时，我会显示一条记录的所有数据，但同样，它是为设备格式化的。我发现我在为不同的屏幕大小创建表格和布局时，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>
为了减少代码重复，我结合使用了.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>
科拉
B列
G列
C柱
{{Row.A}}
{{Row.B}}
{{Row.G}}
{{Row.C}}
<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>