2017-01-13 11 views
1

여러 개의 열과 행이 포함 된 테이블이 있습니다. 작은 화면 (전화)에서 열을 숨길 때 열을 모두 표시하고 그렇지 않으면 모든 열을 표시합니다. 내 테이블의 데이터가 반복을 사용하여 채워집니다. 나는 여러 곳에서 테이블을 재사용하기 때문에 반복을 열로 유지하고 행 수를 다르게하고 싶습니다.반복되는 각도 재질을 사용하는 동안 화면 크기에 따라 일부 테이블 열을 숨기는 방법

<table md-table class="md-data-table" id="data-table"> 
      <thead md-head md-order="gridCtrl.gridModel.orderBy"> 
      <tr md-row> 
       <th md-column ng-repeat="header in gridCtrl.gridModel.headers" md-order-by="fields[{{$index}}].value"> 
        {{header.title}} 
       </th> 
      </tr> 
      </thead> 
      <tbody md-body> 
      <tr md-row ng-repeat="item in gridCtrl.gridModel.items | orderBy: gridCtrl.gridModel.orderBy | limitTo: gridCtrl.gridModel.itemsPerPage : (gridCtrl.gridModel.firstPage -1) * gridCtrl.gridModel.itemsPerPage"> 
       <td md-cell ng-repeat="field in item.fields"> 
        <div ng-if="gridCtrl.isLink(field)"> 
         <h4 class="blue-link" id="gridFieldString{{field.value | idfy}}" ng-click="gridCtrl.click($event, field)"> 
          {{field.value}} 
         </h4> 
        </div> 
        <div ng-if="!gridCtrl.isLink(field)">{{field.value}}</div> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
+0

에 따라 규칙을 미디어 쿼리를 읽고 정의 할 필요가있는 당신을) https://material.io/guidelines/layout/responsive-u.html#responsive-ui-breakpoints – devqon

답변

0

당신은 현재 해상도를 얻을 수

window.screen.availHeight 
window.screen.availWidth 

를 사용할 수 있습니다.

그런 다음 화면 해상도와 NG 숨기기을 추가하거나

<tr md-row ng-hide="window.screen.availHeight < 500 && window.screen.availWidth <200"> 
+0

이것은 모든 행을 숨기고, hide-xs 또는 hide-xs를 추가하여 동일하게 수행 할 수 있습니다. sm 예를 들면. 내 질문은 반복에서 일부 열만 숨기는 방법입니다. – kaliki