角度材质：布局容器填充父项

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/