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>

如何迭代我的阵列并以三行显示卡片？我查看了this post和this post，但我看不出它们如何适用于angular material

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>

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

Answer 2

我只需要这个;这是一个更全面的解决方案，仅使用布局功能，包含3列：

<md-content class="md-padding" layout="row" layout-wrap>
    <div flex="33" ng-repeat="i in [1,2,3,4,5,6,7]">
        <md-card>
            // ...
        </md-card>
    </div>
</md-content>

卡片must be wrapped位于正确大小的div内，可以控制边距并避免溢出。

Answer 3

要对材质/角度进行处理，必须使用flex attr到md-card。 Flex attr将为您提供与其父级成比例的宽度。

<div class='md-padding' layout="row" layout-wrap>
    <md-card flex="40" flex-sm="80" 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>

在此示例中，您将有两张卡（每张40％），当屏幕调整为-sm时，卡片将为80％。

Answer 4

您可以为此使用class="grid-container"。例如，这样的代码片段，

<div class="grid-container">
    <mat-grid-list cols="2" rowHeight="350px">
        <mat-grid-tile [colspan]="1" [rowspan]="1">
            <mat-card class="mat-elevation-z8 card-prop"> CARD 1
            </mat-card>  
        </mat-grid-tile>
        <mat-grid-tile [colspan]="1" [rowspan]="2">
            <mat-card class="mat-elevation-z8 card-prop"> CARD 2
            </mat-card>  
        </mat-grid-tile>
        <mat-grid-tile [colspan]="1" [rowspan]="1">
            <mat-card class="mat-elevation-z8 card-prop"> CARD 3
            </mat-card>  
        </mat-grid-tile>
    </mat-grid-list>
</div>

将产生与此类似的输出。

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

4 个答案: