Как создать сетку карт с материалом angular?

Я пытаюсь создать сетку из трех карт в строке, используя 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>

Как я могу перебирать массив и отображать карты в виде строк из трех? Я просмотрел этот пост и этот пост, но я не вижу, как они применяются к angular материал

Ответы

Ответ 1

Я создал нечто похожее на то, что вам может понадобиться. md-card заключен в div с layout-wrap. После чтения динамики генерируются динамически.

Вот код:

<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>

Ширина карт можно настроить с помощью встроенного стиля, надеясь, что это поможет.

Ответ 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>

Карта должна быть обернута внутри div с правильным размером, чтобы сохранить поля под контролем и избежать переполнения.

Ответ 3

Чтобы компилировать материал /angular, вы должны использовать flex attr для md-карты. 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%.