Lakshman Pilaka Lakshman Pilaka - 3 months ago 30
AngularJS Question

Aligning cards in ng-repeat

I am showing cards using

ng-repeat
. The data and all is coming fine but somehow i am struggling to have 3 cards in a row and go to the next row for the other items.

My
ng-repeat
code is as follows:

<md-content ng-repeat="agent in agents|filter:search" layout="row">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-subhead">{{agent.RCustId}}</span>
<span class="md-headline">{{agent.FullName}}</span>
<span class="md-subhead">{{agent.ContactNum}}</span>
</md-card-title-text>

</md-card-title>

<md-card-content>
<p>
{{agent.address}}
</p>
</md-card-content>

<md-card-actions layout="row" layout-align="end center">
<md-button>Collect {{agent.balance_amount}}</md-button>
</md-card-actions>

</md-card>
</md-content>


I want the card side by side but these are coming one per each line.

Where is the issue and how to resolve it please.

Answer

Try surrounding md-card with a <div> with layout-wrap - you can then use flex=".." - with number corresponding to number of columns you want in row.

See layout options documentation here.

<div class='md-padding' layout="row" layout-wrap>
       <md-card flex="33" ng-repeat="agent in agents|filter:search">

See answer here for more detail and examples.