Angular Material: 填充父级的布局容器

Question

我正在使用 Angularjs 1.5 和 Angular Material 1.0.5 创建模拟 table。我遇到的问题是我无法让子组件 'cell' 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 forflex` 的层级，否则您的 flex 不会有任何效果。

https://jsfiddle.net/t8pssapu/

Angular Material: 填充父级的布局容器

Angular Material: Layout Containers to fill parent

angularjs

angular-material