使用 angularjs material 实现 4 单元网格布局

Question

我需要设计一个 html 以使用 JSON 数组的 ng-repeat 每行最多显示 3 列，如下所示：

例如：

jsonArray: [1,2,3,4,5,6,7,8]

O/p 预计：

| 1 | 2 | 3 | 4 |

| 5 | 6 | 7 | 8 |

使用 bootstrap 我会做类似的事情：

<div class="container">
  <div class="row">
    <div class="col-md-3" ng-repeat="val in jsonArray">{{val}}</div>
  </div>
</div>

我在 angularjs material 中尝试了类似的方法，布局和弹性如下：

<div layout="row">
  <div flex="25" ng-repeat="val in jsonArray">{{val}}</div>
</div>

但是 flex 指令将所有元素添加到同一行（这是预期的行为）。如果它是静态网格，我可以使用 layout="row" 和 layout="column" 的组合来实现。在我的例子中，JSON 是 AJAX 的动态响应。

使用 angularjs-material 获得此布局的正确方法是什么。

Answer 1

我认为 layout-wrap 指令可以帮助您在新行上换行连续 4 行。

<div layout="row" layout-wrap>
   <div flex="25" ng-repeat="val in jsonArray">{{val}}</div>
</div>

Achieving a 4 cell grid layout with angularjs material