Angular：根據屏幕分辨率切換HTML

Question

如何根據屏幕分辨率更改HTML佈局。

情況：我有一個10列的表，但如果瀏覽器寬度小於900px，它看起來很醜。當尺寸小於或等於900px時，我想更改HTML佈局（合併3列到）。

Answer 1

利用媒體查詢，你可以隱藏某些表中的列：

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 2

使用Bootstrap響應網格類。它會自動處理響應。 如果您想使用自定義網格，那麼您可以使用角度ng-class屬性來實現響應。

Answer 3

我已經基於控制器改變上解決了這個一個基於寬度的值，我不記得爲什麼使用媒體查詢不是一個選項，但它在這裏：

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(); 
     }); 
    }); 
}); 

然後你可以使用基於$ scope.mobile的ng-show。希望這可以幫助