come posso creare una griglia di carte con materiale angolare?

Question

Sto provando a creare una griglia di tre carte per riga usando ng-repeat. Ho una normale schiera di oggetti javascript collegati all'oscilloscopio. Il codice seguente creerà una nuova riga per ogni carta.

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

Come posso iterare la mia matrice e visualizzare le carte in file di tre? Ho guardato a this post e this post ma non vedo come si applicano a angular material

Answer 1

Ho creato qualcosa di simile a ciò che si potrebbe desiderare. Lo md-card è incluso in un div con layout-wrap. I div sono generati dinamicamente dopo la lettura.

Ecco il codice:

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

La larghezza carte può essere regolato con uno stile in linea, spero che aiuta.

Answer 2

Per essere conforme al materiale/angolare, è necessario utilizzare flex attr su scheda md. Flex attr ti darà una larghezza proporzionale rispetto al suo genitore.

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

In questo esempio, si avranno due carte (40% ciascuno) e quando lo schermo viene ridimensionato per -SM, le carte saranno al 80%.

Answer 3

Ho solo bisogno di questo; qui è una soluzione più completa, utilizzando solo le funzioni di layout, per 3 colonne:

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

La scheda must be wrapped all'interno di un div correttamente dimensioni per mantenere i margini sotto controllo ed evitare di overflow.