как создать сетку карт с угловым материалом?

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

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

Answer 3

Мне просто нужно это; вот более комплексное решение, используя только возможности компоновки, для 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, чтобы сохранить маржу под контролем и избежать переполнения.