角度材質：佈局容器填充父項

Question

我使用Angularjs 1.5和Angular Material 1.0.5創建一個模擬表。我遇到的問題是我無法獲取子組件的「單元格」背景顏色，以填充父項高度的100％。這是我的jsfiddle。如何做到這一點的任何幫助表示讚賞？

JSFIDDLE

HTML

<div ng-app="myApp" ng-controller="mainCtrl"> 
    <style> 
    .table-row{ 
    border-top: 1px solid black; 
    border-left: 1px solid black; 
    border-bottom: 1px solid black; 
    } 
    .table-cell{ 
    border-right:1px solid black; 
    } 
    </style> 
    <script type="text/ng-template" id="/table"> 
    <div layout='column'> 
    <div ng-repeat='col in [0,1,2]'> 
     <div layout="row" class='table-row'> 
     <div layout-align='center center' ng-repeat='row in [0,1,2]' flex class='table-cell'> 
      <div ng-if='$odd' flex> 
      <cell></cell> 
      </div> 
      <div ng-if='$even'flex> 
      TEST</br> 
      TEST</br> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

    </script> 
    <script type="text/ng-template" id="/cell"> 
    <div style='background-color:red'> 
    CELL 
    </div> 
    </script> 


    <h3> 
    {{name}} 
    </h3> 

    <table> 
    </table> 

</div><!--end app--> 

Answer 1

您需要添加layout="column/row" attributes. They are the containers for flex`的層次結構，否則你的Flex不會有任何效果。

https://jsfiddle.net/t8pssapu/