AngularJS/Bootstrap show different columns on different screen sizes -
i new angularjs, have controllers working application , returning data. however, when working responsive web designs, showing different info in initial display of tables based on device.
for instance, have info beingness returned 7 columns (a-g). when show table on big display (pc), want show columns. however, tablet (col-sm) may show columns a, b, g, c, while phone (col-xs ) might show columns b , g.
when user clicks on column, display info 1 record, again, formatted device. find have big amount of duplication in html creating tables , layouts different screen sizes. such, there big amount of info beingness sent portable devices (phones, tablets) takes transmission times items not displayed such.
i wondering best way include format control, info each platform (phone, tablet, etc) might sent down? right way, since when screen rotates, need 2 sizes. send 2 sizes portrait/landscape alter makes sense, not big desktop size.
how have people developed applications handle this? sample shows 2 tables, want have 1 based on screen size.
sample 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 info 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 info 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> and 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 } ]; });
in order cut down code duplication, have used combination of .visible-xs , .hidden-xs show/hide columns on smaller displays.
<div> <!-- tablets, show 4 info 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 twitter-bootstrap-3
No comments:
Post a Comment