角度材质：用于填充父级的布局容器

Question

我使用Angularjs 1.5和Angular Material 1.0.5来创建一个模拟表。我遇到的问题是我无法获得子组件＆＃39; cell＆＃39; background-color以填充父级的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/