Angular: switch HTML depending on screen resolution

Question

How to change HTML layout depending on the screen resolution.

Situation: I have a table with 10 columns, but if the browser width is smaller than 900px it looks ugly. I would like to change the HTML layout ( merge 3 columns to one ) when the size is or less than 900px.

Answer 1

Use Bootstrap responsive grid classes. It will automatically handle responsiveness. If you want to use custom grid then you can use angular ng-class attribute to achieve responsiveness.

Answer 2

By using media queries, you could hide some of the table columns:

HTML:

<table>
    <tr>
        <td>Col1</td>
        <td class="show-under-900px">Col2, Col3</td>
        <td class="hide-under-900px">Col2</td>
        <td class="hide-under-900px">Col3</td>
    </tr>
    <tr>
        <td>Col1</td>
        <td class="show-under-900px">Col2, Col3</td>
        <td class="hide-under-900px">Col2</td>
        <td class="hide-under-900px">Col3</td>
    </tr>
    <tr>
        <td>Col1</td>
        <td class="show-under-900px">Col2, Col3</td>
        <td class="hide-under-900px">Col2</td>
        <td class="hide-under-900px">Col3</td>
    </tr>
</table>

CSS:

@media screen and (min-width: 900px) {
    .show-under-900px {
        display: none;
    }
    .hide-under-900px {
        display: table-cell;
    }
}
@media screen and (max-width: 900px) {
    .show-under-900px {
        display: table-cell;
    }
    .hide-under-900px {
        display: none;
    }
}

Answer 3

I have solved this based on a controller that changes a value based on width, I dont' remember why using media queries wasn't an option but here it is:

angular.module('app')
.controller('mobileController', function ($scope, $window) {

    var mobileWidth = 768;

    $scope.isMobile = function(){
        $scope.mobile = false;
        if(document.body.clientWidth <= mobileWidth){
            $scope.mobile = true;
        }
    };

    angular.element($window).bind('load resize', function(){
        $scope.$apply(function() {
            $scope.isMobile();
        });
    });
});

you can then use ng-show based on the $scope.mobile. hope this helps