CODEWITHSUNDEEP
angularjstwitter-bootstrap-3
Steven Scott
Steven Scott

Reputation: 11250

AngularJS/Bootstrap show different columns on different screen sizes

I am new to AngularJS, but have my controllers working well with the application and returning data. However, when working with responsive web designs, I am showing different information in the initial display of tables based on the device.

For instance, I have data being returned with 7 columns (A-G). When I show the table on a large display (PC), I want to show all the columns. However, a tablet (col-sm) may show columns A, B, G, C, while a phone (col-xs ) might show columns B and G.

When a user clicks on a column, I then display all the data for the one record, but again, it is formatted for the device. I find that I have a large amount of duplication in the HTML with creating the tables and layouts for the different screen sizes. As such, there is also a large amount of data that is being sent to portable devices (phones, tablets) that takes transmission times for items that will not be displayed as such.

I am wondering the best way to include the format control, so that only the information for each platform (phone, tablet, etc) might be sent down? Is this even the right way, since when the screen rotates, you need two sizes. I am good to send 2 sizes together as the portrait/landscape change makes sense, but not really the large desktop size.

How have people developed the applications to handle this? This sample shows 2 tables, but I want to only 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 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>

And then the 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 }
    ];
});

Upvotes: 1

Views: 1937

Answers (1)

Steven Scott
Steven Scott

Reputation: 11250

In order to reduce the code duplication, I have used a combination of .visible-xs and .hidden-xs to show/hide columns on the smaller displays.

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

Upvotes: 3

Related Questions