如何使用角度材料创建卡片网格？

Question

我试图使用ng-repeat创建每行三张牌的网格.我有一个附加到范围的正常javascript对象数组.下面的代码将为每张卡创建一个新行.

<div layout="row" ng-repeat='post in posts' layout-fill="" layout-align="">
<md-card>
  <md-card-content>
    <h2 class="md-title">{{post.title}}</h2>
    <p>
      {{post.summary}}
    </p>
  </md-card-content>
  <div class="md-actions" layout="row" layout-align="end center">
    <md-button>View More</md-button>
  </div>
</md-card>
<br>

如何迭代我的阵列并以三行显示卡？我查看了这篇文章和这篇文章,但我看不出它们如何应用于棱角分明的材料

Answer 1

我创造了类似于你想要的东西.所述md-card被内包装div具有layout-wrap.读取后动态生成div.

这是代码:

<div class='md-padding' layout="row" layout-wrap>
    <md-card style="width: 350px;" ng-repeat="user in users">
      <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
      <md-card-content>
        <h2>{{user}}</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </md-card-content>
      <div class="md-actions" layout="row" layout-align="end center">
        <md-button>Save</md-button>
        <md-button>View</md-button>
      </div>
    </md-card>
  </div>

可以使用内联样式调整卡片宽度,希望它有所帮助.